vue3 组合式函数导出的响应式变量逻辑有BUG？

先看例子：

首先定义个组合式函数：

// useObj.ts
import { ref} from 'vue'// 按照惯例，组合式函数名以“use”开头
export function useObj() {// 被组合式函数封装和管理的状态const isHovered = ref(false); const classes = computed(() => ({'is-hover': isHovered.value,}));// 通过返回值暴露所管理的状态return { isHovered , classes  }
}

然后再组件中使用：

<script setup lang="ts">import { onMounted, ref, defineProps, computed, watch, reactive, toRef, toRefs } from 'vue';import { useObj } from '@/useObj.ts'const obj = useObj();
</script><template><div @mouseover="obj.isHovered.value = true" @mouseleave="obj.isHovered.value = false"  >只有后面带.value才能触发相应效果</div><div v-if="obj.isHovered.value" >只有后面带.value才能正常读取isHovered </div><div :class="obj.classes.value" >只有后面带.value才能正确设置样式</div>{{obj.isHovered}} 此时不带.value也能正常读取。
</template><style></style>

 通过组合式函数获取到对应的ref或者computed对象，在下面的template中不能自动解包。如果是直接定义在script 中的ref和computed对象是会自动解包的。即下面不用带.value。不知道为什么会这样，先记录一下。