Vue: Merging data reactively

[bopjesvla]

There seems to be no way to use Vue's merge strategies when assigning new data to a mounted instance. Mixins and vm.$options = Vue.util.mergeOptions(vm.$options, {data: x => newData}, vm) aren't reactive.

Something like vm.$merge(newData) or vm.$mixin({data: newData}) would be nice. The ability to add mixins on the fly would make Vue very flexible (vm.$mixin({computed: {x: newFn}}) would be a neat way to reactively change computed functions, for example), but $merge is probably much easier to implement.

[yyx990803]

I don't like the idea of runtime mixins, because it makes your components' behavior unpredictable depending on when mixins are applied.

Merging data and merging options are totally different concepts. Data is per-instance state, options is like the class definition of your component.

As for merging data, it is recommended to just replace the original object with the new data:

vm.$data = Object.assign({}, vm.$data, newData)