How watch insertion into an object at VueJS?

Question

I'm trying get a insertion into an object at Vue, but I can't...

data: {
    formValid: {},
    buttonIsDisabled: true,
    statusModal: 'active',
},
methods: {
    closeModal() {
        this.statusModal = ''
        this.formValid.test = "test"
    }

},
watch: {
    formValid: {
        handler(o, n) {
            console.log(o)
            console.log(n)
        },
        deep: true
    }
}

When I do 'this.formValid.test = "test"' I don't go to Watch, but if I have this object into of the formValid and I change it, in this case, I go to Watch.

Do you know how can I get this event?

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats — Michal Levý, Oct 06 '20 at 14:12
Does this answer your question? [Vue Watch not triggering](https://stackoverflow.com/questions/46666819/vue-watch-not-triggering) — Michal Levý, Oct 06 '20 at 14:18

score 1 · Accepted Answer · answered Oct 06 '20 at 14:15

You cannot add reactive properties to an object on the fly with Vue2 like this. You'll need to either define them in data:

data: {
    formValid: {
        test: '',
    },
    buttonIsDisabled: true,
    statusModal: 'active',
},

or use:
Vue.set(this.formValid, 'test', 'test');

How watch insertion into an object at VueJS?

1 Answers1