Create a drag for multiple SVG objects

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

The $data of objects are 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 attributes of the Vue that I'm using for the other features, but the base 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 have not found anything on the internet with regard to dragging using Vue.js I am asking here, there is information of a drag, but there is the one using HTML 5.

jfiddler than I ever did: link

  

Note however that if the test is done by firefox it is not taking the correct position, only in the 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 connection lines.