Is it correct to work with component data through a directive in this way?

Question

Vue.js

jsfiddle.net/f7v1deuw
An abstract example.
I understand the possibilities of the directive.
Please tell me if I am using JS and Vue correctly to change the component data.

Object.assign(binding.value.object, {
        [binding.value.field]: "some new val"
      });

Answer 1

in fact, it’s not entirely clear how to work with directives, but I got the impression
1) changing the component data in the directive is bad, because the data-way is violated, it’s difficult to track what happens to the component in general and directives are not debugged in dev-tools
2) the directive works directly with the dom element, and not with the component, i.e. meaning that you should not change the data of the component from outside, but you can customize the html, such as adding classes or all sorts of effects
3) a bug with adding classes,
the problem is that if the class in the component changes, then through the directive it will no longer be possible to hang the class again , el.classList.add('white'); will be ignored, demo