How to track any changes in the data object?

Question

Vue.js

I'm scratching my head over the problem. There is an Article.vue component in steal. I want to use the same component for both creating and updating. And in the second case, I need to track ANY changes to existing data (which come from the back). I'm trying to do with watch, but it doesn't work.

props: ['articleProp'],
    data() {
        return {
            article: {
                title: null,
                description: null
            }
        }
    },
    watch: {
        article: {
            deep: true,
            handler(newValue, oldValue) {
                console.log('triggered')
            }
        }
    },
    mounted() {
        if (this.articleProp) {
            Object.keys(this.articleProp).filter(key => key in this.article).forEach(key => {
                this.article[key] = this.articleProp[key]
            })
        }
    }

The problem is that I assign this.articleto mounted and watch is triggered when I don't need it. In addition, the watcher returns both identical values ​​and it is impossible to track anything!!! I don't understand at all what to do?
How to assign existing data and THEN track changes in watcher?

Answer 1

watch works when I don't need to

Well, turn on surveillance only when you need it. How to do this, you can read in the documentation .
Which is natural - from the fact that you have changed some of the properties of the object, the object will not replace itself with its copy. If you want the old and new values ​​to be different, replace the entire object.