Using defineModel macro does not trigger update of state in Vue.js

Question

Please find at the below link a minimal example of the type of thing I am trying to achieve in Vue.

Vue SFC Playground link

In my real application, I have several pieces of data maintained in my store which require the same format of input. Therefore, I want to create a general input form which will receive the values from the parent component, and will create a 2-way binding between them, updating the store in the main component. This setup means I cannot simply update the store in the child component, since I don't know at the input component's level which of the store's values the input component is managing.

However, when I set things up as in the example provided, the store is never updated when the values in the input changes. I cannot figure out why this is.

It seems this is something to do with Vue detecting changes in the object. If I remove the v-model directives in the child, and replace them with :value and @input, then use handlers which fully overwrite the model.value object, then reactivity is restored. See the below link for a working example. I'm just not sure my understanding is 100% solid, and if there's a way to make it work with the simpler v-model.

Vue SFC Playground link w/ working example

Answer 1

You need to make store reactive too, so in Your Store.js :

import { reactive} from 'vue'
const Store = reactive({
  name: {
    firstName: "Bill",
    lastName: "Gates"
  }
})
...