vueのv-ifがうまくいかない

実現したいこと

初期状態ではstatusがhelloなので、helloと表示されていて欲しい
clickをクリックすると、statusがbyeになるので何も表示されなくなってほしい

困っていること

全体的にvueが全く反映されていないように思います...。書き方が悪いのかわかりませんが、教えていただけると幸いです。

status === 'hello'をhello1などに変えてもhello!が描画されてしまうので、v-ifがうどいていないように感じる
clickを押してもchangeStatusに飛ばない

<script src="https://unpkg.com/vue@next"></script>

<div id="test" v-if="status === 'hello'">
    hello!
    <button v-on:click="changeStatus">click</button>
</div>


<script>
    const test = {
        data() {
          return {
            status: 'hello'
          }
        },
        method: {
            changeStatus() {
                this.status = 'bye'
                console.log(this.status)
            }
        }
    }
    const app = Vue.createApp(test)
    app.mount('#test')
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

methodsが間違ってmethodになってしまっているのがchangeStatusが呼ばれない原因です。
コンソールにエラーが出力されているのでそれをよく確認してください。

[Vue warn]: Property "changeStatus" was accessed during render but is not defined on instance. 
  at <App>

それと、v-ifはappをマウントしている要素(#test)には適用されないので、
別の要素で括ってやってください。

html
1<div id="test">
2    <div v-if="status === 'hello'">
3        hello!
4        <button v-on:click="changeStatus">click</button>
5    </div>
6</div>