Create a drag for multiple SVG objects

Question

I’m using Vue.js to create a jflap clone. But I’m having trouble creating the drag for each object. In this case, the circle when clicking and dragging this, must follow the route of the mouse until the release of the button where it should remain at this last point.

the $data of the objects is as follows:

nodes: [
  {
    cx: 100,
    cy: 100,
    id: 0,
    selected: false,
    ini: false,
    final: false
  }
],

The SVG to create the nodes:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300" version="1.1" v-on="click: add">
  <g>
    <circle
      v-on="click: selectFunc"
      v-repeat="nodes"
      id="{{id}}"
      cx="{{cx}}"
      cy="{{cy}}"
      r="30"
      v-class="selected: selected"
    >
    </circle>
  </g>
</svg>

There are some more attributes of Vue that I’m using for other features, but the basis is this, nothing complicated. I can add new nodes in the position I want and remove the node I want, but I still need to finish moving these nodes and finally add the links by lines, but this is the last part.

As I did not find anything on the internet with regard to drag using Vue.js I am asking here, there is information of a drag, but there is the using of HTML 5.

jfiddler of what I’ve done: https://jsfiddle.net/a4uwu3sa/

Note however that if you test by firefox it is not getting the correct position, only in Chrome and derivatives that appears in the correct position, this I intend to solve later. My priority is to move the objects and then add the link lines.