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 Vue({
    el: '#vue-table',
    data: {
        filters: {},
    },
    watch: {
        filters: {
            handler: function () {
                console.log('watched');
            },
            deep: true
        }
    }
}

And i have a v-model on an input like so:

<input class="form-control" v-model="filters.name">

Now when the page loads it logs watched in the console just once, whenever i change the input it doesn't log anything.

Yet when i put vueTable.filters = {name: 'something'}; after the table initalization it will trigger on every change.

Is this unexpected behaviour? or do we have to define all our properties in order for them to be watched?

Answer 1

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 },
}

Answer 2

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