Vue中input checkbox用v-model绑定异步数据时无法正常勾选

Vue组件初始化阶段从数据库拉取配置数据，预期规则为：接口返回字段值为true时，type="checkbox"的input自动勾选，值为false时不勾选。实际运行时接口返回true的场景下复选框未正常勾选。
测试发现单独使用:checked绑定可以正常同步状态，但业务需要双向绑定能力，必须使用v-model。
问题复现代码（回忆版本）：

<input type="checkbox" v-model="data">

<script setup>
import { ref, onBeforeMount } from 'vue'
const data = ref(false)

onBeforeMount(async () => {
    await data = fetchingData()
})
</script>

代码中对ref响应式变量的赋值写法错误：
Vue3 中通过ref()创建的响应式变量，读取、修改原始值必须通过.value属性操作。当前写法await data = fetchingData()直接覆盖了data变量本身，把原本的ref响应式对象替换成了接口返回的普通值，既破坏了v-model绑定的响应式引用，原ref对象存储的状态也没有得到更新，自然无法触发复选框的状态同步。
单独使用:checked能正常生效，是因为模板渲染时直接读取了被覆盖后data变量存储的布尔值，但此时响应式连接已经断裂，后续用户操作复选框时状态同步依然会异常。

不需要用:checked搭配@change手动实现双向绑定，修正赋值写法即可解决问题：

• 给ref的.value属性赋值，注意await关键字要放在异步请求调用前，保证拿到接口返回结果后再赋值：

<input type="checkbox" v-model="data">

<script setup>
import { ref, onBeforeMount } from 'vue'
const data = ref(false)

onBeforeMount(async () => {
    data.value = await fetchingData()
})
</script>

• 如果修正赋值后依然存在初始化不勾选的偶发问题，可以把数据拉取逻辑从onBeforeMount挪到onMounted钩子中执行，避免元素未完成v-model绑定就更新状态导致的时序问题。

内容的提问来源于stack exchange，提问作者TheKing