Why doesn't 2-way binding in the directive work?

Question

Vue.js

There is such a directive and heatplate

Vue.directive('tack', {
  bind (el, binding, vnode) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  }
})

<template>
  <div class="hello">
    <input type="text" v-model.lazy="directiveValue">
    {{directiveValue}}
    <h1 v-tack="directiveValue">{{ msg }}</h1>
  </div>
</template>

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      directiveValue: 0
    }
  }
}

Why is this value not passed to the directive when entering into an input and changing the values ​​of the directiveValue?

Answer 1

The bind hook is called once, when the directive is bound to the element. Use update to process changes.