Vue.js watching deep properties

Question

I\'m trying to watch properties on a vue.js object, but i\'m not getting the result that i want, my code is the following:

var vueTable = new Vu         


        

Answer 1

You can use something with the looks of this

this.$set(this.filters, 'name', "")

Using $set (as described in https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats) the observable will be correctly added

Answer 2

The documentation covers this here.

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion.

By starting with an empty object and setting v-model to filters.name, you end up adding a property dynamically. The best approach in this case would be to initialize the property in the data. It doesn't have to have a value.

data: {
    filters: { name: null },
}