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://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats