Vue: Cannot seem to set properties on a vm from a directive in Vue 2.0

[callumacrae]

In Vue 1.0, it was possible to set data on the vm of the component calling the directive:

Vue.directive('my-directive', {
  bind() {
    this.vm.$set('hello', 'world');
    this.vm.hello; // -> "world"
  }
});

This was useful in, for example, pagination directives which would set the current page number and the number of pages.

In Vue 2.0, the functionality seems to be there, but it doesn't work:

Vue.directive('my-directive', {
  bind(el, binding, vnode) {
    Vue.set(vnode.context, 'hello', 'world');
    vnode.context.hello; // -> undefined
  }
});

Is this intentional, or should I send a PR with a failing test case? (or am I just misunderstanding something?)

[yyx990803]

In 2.0, a Vue instance's root level reactive properties are static. If it's not declared in the component's data option, you cannot add it dynamically at runtime. In fact you should see a warning in console in your second example.

In your case, your directive should now require the user to declare the property it needs to access and modify.

[imuller]

@yyx990803 Is it possible to make the first and second parameter dynamic? For example when i'm passing them as an argument or binding?

Vue.set(vnode.context.$data.property.subproperty, 'content', _el.val());