[Vuejs]-How to trigger a directive event after appending an element?

Vue.directive('drag', {
  bind: function() {
    var el = this.el;
    var initialX, initialY;
    var startX, startY;
    var x, y;

    el.addEventListener("mousedown", function(e) {
    	e.preventDefault();
      console.log('mousedown')
      var transformPosition = $(el).attr("transform").match(/\d+/g);
			
    	initialX = transformPosition[0];
      initialY = transformPosition[1];
      startX = 100 / 2;
      startY = 50 / 2;

      $(document).on("mousemove", mousemove);
      $(document).on("mouseup", mouseup);
    });

    function mousemove(e) {
    	e.preventDefault();
      x = e.pageX - startX - $(el).parent('svg').position().left;
      y = e.pageY - startY - $(el).parent('svg').position().top;

      $(el).attr('transform', 'translate(' + x + ',' + y + ')');
    }

    function mouseup() {
      $(document).off("mousemove", mousemove);
      $(document).off("mouseup", mouseup);
      $(el).attr('transform', 'translate(' + initialX + ',' + initialY + ')');
    }
  }
});

var vm = new Vue({
  el: '#container'
});

svg {
  border: 1px solid black;
}

.node:hover {
  cursor: pointer;
}
.node:hover .split {
  fill: #F7ED5D;
}
.node .split {
  fill: #FDFFAB;
  stroke: #F7ED5D;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <svg id="palet" height="250" width="250">
    <g class="node" transform="translate(0, 75)">
      <polygon points="50,0 100,25 50,50 0,25" class="split" />
      <text x="35" y="30">Split</text>
    </g>
    <g class="node" transform="translate(0, 75)" v-drag>
      <polygon points="50,0 100,25 50,50 0,25" class="split" />
      <text x="35" y="30">Split</text>
    </g>
  </svg>
</div>