Why an addition of a key does not trigger a watched variable?

Question

I have an Object allevents asynchronously updated with keys and values. Whenever allevents is modified I would like to trigger a recalculation function.

To do so, I use the following Vue structure (in a component, all irrelevant elements removed):

export default {
        data: function () {
            return {
                //
                allevents: {},
                events: []
            }
        },
        methods: {
            //
            mqttMessage(topic, message) {
                const cal = topic.split('/').pop()
                this.allevents[cal] = JSON.parse(message).filter(x => true)
                // following the update above, I was expecting that since 
                // allevents is watched below, the function would trigger
                // as a workaround, I added this line below which fixes the issue
                // but I still would like to understand the lack of trigger
                this.computeEvents()
            },
            // the function ssupposed to be triggred after a chnage, below
            computeEvents() {
                this.events = []
                Object.values(this.allevents).forEach(cal => cal.forEach(e => this.events.push(e)))
            }
        },
        watch: {
            // whenever allevents change, run computeEvents() <-- this does not happen
            allevents() { 
                console.log("events compute triggered")
                this.computeEvents() 
            }
        },
        mounted() {
            //
        }
}

Even though allevents is modified and is watched, computeEvents() is not started. Why?

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats — Roy J, Apr 18 '18 at 14:51

score 2 · Accepted Answer · edited Jul 15 '22 at 23:48

It appears you are victim of a Reactivity/Change Detection Caveat.

Instead of:

this.allevents[cal] = JSON.parse(message).filter(x => true)

Try:

Vue.set(this.allevents, cal, JSON.parse(message).filter(x => true))

Or:

this.$set(this.allevents, cal, JSON.parse(message).filter(x => true))

Relevant excerpt from the docs:

Change Detection Caveats

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive. For example:
var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` is now reactive
vm.b = 2
// `vm.b` is NOT reactive
Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it's possible to add reactive properties to a nested object using the Vue.set(object, key, value) method:
Vue.set(vm.someObject, 'b', 2)
You can also use the vm.$set instance method, which is an alias to the global Vue.set:
this.$set(this.someObject, 'b', 2)

@adelriosantiago Is the name of the a property that is in `data`. In the example, `a` is one such property (although it is a number, and that `set` call only would make sense if `a` was an object). — acdcjunior, May 17 '20 at 16:25

Why an addition of a key does not trigger a watched variable?

1 Answers1

Change Detection Caveats