How to make an instance property in VUE reactive?

Question

Vue.js

In the plugin, I declare the prototype property:
Vue.prototype.$dataGroups = [];
But as it turned out, it is not reactive.
Setting the property with Vue.set didn't work either:

Vue.set(Vue.prototype, '$dataGroups', ["navigation"]);

Answer 1

Hmm, something like this comes to mind:

const box = new Vue({data: {groups: []}});
Object.defineProperty(Vue.prototype, '$dataGroups', {
  configurable: true,
  get() { return box.groups; },
  set(value) { box.groups = value; }
});

PS You have different properties of $dataGroups and $dataGroupsActive
PSS having objects/arrays in the prototype is not a good practice, it's better to do it like Vuex throws $store into instances via mixin: https://github.com/vuejs/vuex/ blob/dev/src/mixin.js#L22
UPD : mixin example:

Vue.mixin({
  beforeCreate() {
    const {$options} = this;
    const {parent} = $options;
    if($options.dataGroups) {
      const groups = typeof $options.dataGroups === 'function' ? $options.dataGroups() : $options.dataGroups;
      const box = new Vue({data: {groups}});
      Object.defineProperty(this, '$dataGroups', {
        configurable: true,
        get() { return box.groups; },
        set(value) { box.groups = value; }
      });
      return;
    }
    if(!parent) { return; }
    const descriptor = Object.getOwnPropertyDescriptor(parent, '$dataGroups');
    if(!descriptor) { return; }
    Object.defineProperty(this, '$dataGroups', descriptor);
  }
});

Answer 2

If you want something simple, then you can use a simple state container and use the event bus for the actor component model