我创建了一个具有React布尔值的组合。出于某种原因，reactive boolean只适用于模板v-if中的.value。它不会在模板中自动打开它。
但是如果我直接在vue组件上使用布尔引用，它就可以工作了。我复制了here
代码：

// useToggle.ts file
import { ref } from "vue";

const visible = ref(true);

export function useToggle() {
  function toggle() {
    visible.value = !visible.value;
  }

  function close() {
    visible.value = false;
  }

  return {
    visible,
    toggle,
    close,
  };
}

// App.vue file
<script setup lang="ts">
import { ref } from "vue";
import { useToggle } from "./useToggle";

const visible = ref(true);
const t = useToggle();
</script>

<template>
  <button @click="visible = !visible">toggle local</button>
  <div v-if="visible">local</div>

  <button @click="t.toggle">toggle global without value</button>
  <div v-if="t.visible">global (this doesn't work)</div>
  <div v-if="t.visible.value">global (this doesn't work)</div>

  {{t.visible}} (but this, updates)

</template>

我不明白为什么V-IF不能正常工作。我能做些什么来使可组合的工作像本地引用一样？