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

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

///Composition API///
<template>
  <button @click="active()">ボタン</button>
  <div v-if="isActive" class="hidden"></div>
  <div v-else class="text-red-500">未入力の項目があります。</div>
</template>
 
<script>
export default {
  setup() {
let isActive;
let active = () => {
  if (条件式) {
    isActive = false;
    console.log("No title"); //ここはコンソールから出力させる。
  } else {
    console.log("OK"); //ここはコンソールから出力させる。
  }
};
return {
  isActive: true,
  active,
        };
    },
};
</script>

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

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

編集

export default {
  setup() {
    let isActive = ref(true);
    let active = () => {
      if (条件式) {
        isActive.value = false;
        console.log("No title"); //ここはコンソールから出力させる。
      } else {
        console.log("OK"); //ここはコンソールから出力させる。
      }
    };
    return {
      isActive,
      active,
    };
  },
};
1 Like

have to need a value. …
thanx!! workig!!