title: Vuejs Local Directive Not Binding To Data When Passing A Method To Call
body: <p>Defining a vuejs directive locally has issues when calling a method when being bound locally. </p>
  
  <p>The problem: on tab/enter, look-up a value and set it based on what comes back (ie; setTimeout is the fake http call). Upon set time out completing, update the compute property.</p>
  
  <p>I am aware of the migration docs says to use an 'eventHub' to communicate 
  between the directive and the parent component. Is there another way to do this? If you check out the fiddle below, the global directive works perfectly while the local directive fails. I feel like the vm is not being bound properly on the local directive.</p>
  
  <p>Local directive:</p>
  
  <pre><code>new Vue({
    el: '#vue',
    directive: {
      localSomething: {
        bind (el, b, n, o) {
          $(el).on('keydown', function(e) {
            if(e.keyCode == 13 || e.keyCode == 9) {
              b.value($(el).val());
            }
          });
        }    
      }
    },
    ...
  </code></pre>
  
  <p>Global directive:</p>
  
  <pre><code>Vue.directive('globalSomething', {
    bind (el, b, n, o) {
      $(el).on('keydown', function(e) {
        if(e.keyCode == 13 || e.keyCode == 9) {
          b.value($(el).val());
        }
      });
    }   
  });
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>    Local: &lt;input v-local-something="doSomething" /&gt;
      Global: &lt;input v-global-something="doSomething" /&gt;
  </code></pre>
  
  <p>Method:</p>
  
  <pre><code>  methods: {
      doSomething: function(value) {
          let vm = this;
          setTimeout(function() {
            vm.item.name = value;
          });
      }
  </code></pre>
  
  <p>Fiddle here: <a href="https://jsfiddle.net/4g1xyy9h/" rel="nofollow noreferrer">https://jsfiddle.net/4g1xyy9h/</a></p>