JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.min.js"></script>
<div id="app">
  <div v-foo @bar="changed">{{label}}</div>
</div>

CSS

div {
  border: 1px solid black;
  padding: 5px;
}

JavaScript

Vue.directive('foo', {
  bind(el, binding, vnode) {
    setTimeout(() => {
      console.log(vnode);
      vnode.context.$emit("bar");
    }, 2000);
  }
})

new Vue({
  el: '#app',
  data() {
    return {
      label: 'i should update in 2000ms'
    }
  },
  methods: {
    changed() {
      this.label = 'I AM FREE! <3'
    }
  }
});