Vue3においてtoggleが反応しない。

Question

ボタンクリックでisUserのbooleanを切り替えたい。

Vue3を使用しております。
consoleにはクリックしてもtrueが表示され、falseとの切り替えができない状態です。consoleにはクリックするとtrueが表示されるため、this.isUser = !this.isUserの部分が機能してないようのでしょうか、、、
ご教授よろしくお願いいたします。

該当のソースコード

<button  @click="userOrHost" class="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">toggle切り替え</button>

export default {
  setup() {
    let isUser = true
    function userOrHost() {
      this.isUser = !this.isUser
      console.log(isUser)
    }
    return {
      isUser,
      userOrHost
    }
  }
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

例えばこうではないですか？

<template>
  <button @click="userOrHost" class="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">
    toggle切り替え
  </button>
  <div>
    {{ isUser }}
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const isUser = ref(true)

    function userOrHost() {
      isUser.value = ! isUser.value
      console.log(isUser.value)
    }
    return {
      isUser,
      userOrHost
    }
  }
}
</script>

vue3は自分も勉強中なのでアレなのですが、vue2と結構書き方が違うようです。
下記とかも参考になるのではないかと思います。

https://v3.ja.vuejs.org/guide/reactivity-fundamentals.html

Comments

[IRIESS]

せっかく回答いただいたのに返答が遅くなり申し訳ありません。
上記の通りref関数を使用して解決いたしました。
ご教授ありがとうございました。