Vue Reactivity Note

Object assignment

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, propertyName, value) method:

https://v2.vuejs.org/v2/guide/reactivity.html

Sometimes you may want to assign a number of properties to an existing object, for example using Object.assign() or _.extend(). However, new properties added to the object will not trigger changes. In such cases, create a fresh object with properties from both the original object and the mixin object:

  let data=  Object.assign({}, this.api.data.order, this.convertSRSTableToObject(this.table)[0]); // convertSRSTableToObject - convert to object
  this.$set(this.api.data,'order', data);
  // this.$set  = Vue.set