[Vuejs]-Why is a watched object not updating in vue

The initial object contained properties minimum and maximum. Then, in mounted, you do this:

let initScoreRules = {type: "number"};
this.$data.scoreRules = initScoreRules;

Which means now the scoreRules object does not have those properties.

Vue can only observe changes to properties that are either:

• pre-defined in data() (which you did but then un-did in mounted)
• set with Vue.set() / this.$set()
• present on an object that is assigned to a reactive property.

The last point is also the explanation why the second example works: Here, essentially you do this (leavin out the Object.assign verbosity because it is distracting):

this.$data.scoreRules = { minimum: null }; 

This property will be reactive.

Read more here:

https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats