Vue drag & drop in Recursive component & recursive nesting

Im working with Vue to create recursive Tree component, currently I have added support for checkboxes and expanding nodes, but Im having a bit of trouble with building drag & drop in recursive component

Is there any way to implement drag & drop with this sample:

Codesandbox Link

I can get node that is dragged but on drop I do not get destination node ? On Drag stop I only get dragged node, Should I add on some more places listeners ?

Here I only get dragged node ?

 handleDragEnd() {
          this.$el.classList.remove('cmp-drag-node');
      },

Note: I do not want a solution with VueDraggable Im looking for a simple jsfiddle or some clarification on matter, Vue draggable wont work since I need to drop into the Node not only reorder nodes

Answer

So the Following codepen works fine for me. Managed to handle drag and drop with nested component but yah you need to change some code.

I have used vuedraggable. The main component is Tree.vue and the nodes are in the Treenode.vue. Sometimes it’s cloning the node may bi I have missed something but yah everything else is working fine.

Codepen – https://codesandbox.io/s/lingering-surf-ckv3y