为何将defineModel绑定到computed属性后无法更新？

错误原因 #

你犯了两个核心错误：

1. defineModel() 返回的是一个ref对象，它的 .value 字段需要存储具体的字符串值，但你直接把它赋值成了 computed() 返回的响应式对象——这相当于让 model.value 指向了computed实例，而非实际的输入值，自然无法同步更新。
2. computed() 本身是一个带 .value 的响应式容器，你跳过了取值步骤，根本没拿到 query 的实际内容，只是把容器本身赋值给了 model.value。

正确实现方式 #

方式1：单向同步（输入框改query，自动同步到model）

用 watch 监听 query 的变化，实时更新 model：

import { watch } from 'vue';

watch(query, (newQueryVal) => {
  model.value = newQueryVal;
});

方式2：双向同步（model或query变化，另一方也同步）

如果需要双向绑定效果，用带get/set的computed作为中间层：

import { computed } from 'vue';

const syncData = computed({
  get() {
    return query.value;
  },
  set(newVal) {
    query.value = newVal;
    model.value = newVal;
  }
});

然后把输入框的 v-model 绑定到这个computed：

<input v-model="syncData" />

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