vue3无法监听checkbox的绑定的数据

Vue 3 中监听 checkbox 的绑定数据时，可能会遇到一些小问题，因为 Vue 的默认更新策略并不是实时响应的。如果你直接将一个 boolean 类型的值绑定到 `v-model` 或者通过 `v-bind` 绑定，Vue 只会在组件初始化时设置一次，改变不会触发视图更新。

如果你想要实现实时监听 checkbox 的状态变化并影响数据，你可以采取以下步骤：

1. 使用 `ref` 来创建一个引用，而不是简单的变量，这样可以获取到原始值，并且它的变化会触发更新：

   <template>
     <input type="checkbox" v-model="checkValueRef">
   </template>

   <script>
   export default {
     data() {
       return {
         checkValue: false,
       };
     },
     setup() {
       const checkValueRef = ref(checkValue);
       watch(checkValueRef, (value) => {
         // 这里会监听 checkValueRef 的变化，当 checkbox 状态改变时，会触发这个回调
         console.log('Checkbox value changed:', value);
       });
       return { checkValueRef };
     },
   };
   </script>

2. 或者使用自定义事件 `@change` 直接监听 checkbox 的点击事件：

   <template>
     <input type="checkbox" @change="handleChange">
   </template>

   <script>
   export default {
     methods: {
       handleChange(event) {
         this.checkValue = event.target.checked;
       }
     },
     data() {
       return {
         checkValue: false,
       };
     },
   };
   </script>