嘿，我来帮你捋清楚这个问题！核心原因在于你对计算属性的绑定方式理解有点偏差，咱们一步步拆解：

问题出在哪？ #

你定义的是一个名为data的计算属性，它的get方法返回this.$store.getters.data，set方法只在直接给data整个赋值时才会触发。

当你写v-model="data.field"时，Vue的实际执行逻辑是：

1. 先调用计算属性data的get方法，拿到返回的对象（也就是store里的data）
2. 然后试图给这个对象的field属性赋值——这时候你修改的是get方法返回的那个对象的子属性，完全没触发计算属性data的set方法！

而当你改成v-model="data"时，v-model的双向绑定直接作用在计算属性data本身，输入变化时会直接调用它的set方法，把新值传给SET_DATA mutation，所以一切正常。

怎么解决？ #

如果你确实需要绑定field这个子属性，有两种常见方案：

方案1：给field单独定义计算属性 #

直接针对子属性写计算属性，这样绑定v-model="field"就能正常触发setter：

computed: {
  field: {
    get() {
      console.log("getting field value")
      return this.$store.getters.data.field
    },
    set(value) {
      console.log("set field " + value)
      // 这里可以提交更新field的mutation，比如：
      this.$store.commit('SET_DATA_FIELD', value)
    }
  }
}

方案2：调整响应式更新逻辑（不推荐） #

如果坚持要写v-model="data.field"，需要确保store里的data是响应式对象，并且通过mutation更新子属性，但这种写法不会触发原计算属性data的set方法，逻辑也不够清晰，所以更推荐方案1。

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