JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.min.js"></script>
<div id="content">
  <div v-perm="">
     I think, this 'strange' behaviour happens because extend core function. It is not copying object, just the reference for any object.
  </div>
  <div v-perm="">
  <a target="_blank" href="https://github.com/vuejs/vue/blob/dev/dist/vue.js#L245">Click here to see extend function of Vue.js core</a>
  </div>
  <div v-perm="">
  </div>
  <div v-perm="">
  </div>
  <div v-perm="">
  </div>
  <div v-perm="">
  </div>
</div>

JavaScript

Vue.directive('perm',{
  //It will be reset on new element using this directive
  a:0
  ,b:{
    //I won't be reset on new element using this directive. I am a reference
  	c:0
  }
	,bind:function(){
  	this.a++;
    this.b.c++;
  }
  ,update(n,o){
  	console.log("A value is: "+this.a);
    console.log("C value is: "+this.b.c);
  }
  ,unbind:function(){
  
  }
});

new Vue({
	el: function(){
    return '#content';
  },
  data: function(){
    return {
    };
  },
  methods: {
  }
});