Vue3 Composition API　v-if v-else で表示が切り替わらない。

Vue3 Composition API　v-if v-else で表示が切り替わりません。
optionAPIで書いた際は表示が切り替えられました。
Composition APIに書き換えるにあたって、なぜ表示が切り替わらなくなったのかが分かりません。。。

Vue.js
1<template>
2  <button @click="active()">ボタン</button>
3  <div v-if="isActive" class="hidden"></div>
4  <div v-else class="text-red-500">未入力の項目があります。</div>
5</template>
6 
7<script>
8export default {
9  setup() {
10    let isActive;
11    let active = () => {
12      if (条件式) {
13        isActive = false;
14        console.log("No title"); //ここはコンソールから出力させる。
15      } else {
16        console.log("OK"); //ここはコンソールから出力させる。
17      }
18    };
19    return {
20      isActive: true,
21      active,
22    };
23  },
24};
25</script>

if(条件式)の結果で、 console.log('No title')、else以降の console.log('OK');は出力されるのですが、v-if v-else の切り替えが行われません。。。

return {isActive: false} とすると表示は切り替わるのですが、<button>のクリックでは表示を切り替える事ができません。

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

回答1件

自己解決

Vue.js
1export default {
2  setup() {
3    let isActive = ref(true);
4    let active = () => {
5      if (条件式) {
6        isActive.value = false;
7        console.log("No title"); //ここはコンソールから出力させる。
8      } else {
9        console.log("OK"); //ここはコンソールから出力させる。
10      }
11    };
12    return {
13      isActive,
14      active,
15    };
16  },
17};