Vue Watch not triggering

Question

Trying to use vue watch methods but it doesn't seem to trigger for some objects even with deep:true .

In my component, I recieve an array as a prop that are the fields to create the following forms. I can build the forms and dynamicly bind them to an object called crudModelCreate and everything works fine (i see in vue dev tools and even submiting the form works according to plan)

But I have a problem trying to watch the changes in that dynamic object.

  <md-input v-for="(field, rowIndex) in fields" :key="field.id" v-model="crudModelCreate[field.name]" maxlength="250"></md-input>

   ...

   data() {
      return {
         state: 1, // This gets changed somewhere in the middle and changes fine
         crudModelCreate: {},
      }
   },
   ...
   watch: {
        'state': {
            handler: function(val, oldVal) {
                this.$emit("changedState", this.state);
                // this works fine
            },
        },
        'crudModelCreate': {
            handler: function(val, oldVal) {
                console.log("beep1")
                this.$emit("updatedCreate", this.crudModelCreate);
                // This doesn't work
            },
            deep: true,
            immediate: true
        },
    }

Answer 1

From the docs

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion . Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive.

Please take a look to Reactivity in Depth https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Answer 2

在某些情况下，可以通过将 key 属性添加到包含在 v-model 中传递给它的对象的 json 字符串的子组件来强制刷新。

<Component v-model="deepObject" :key="JSON.stringify(deepObject)" />