Im in desperate need for help.

Im trying to create something like https://goodies.pixabay.com/jquery/snap-puzzle/demo.html, just using Vue, Canvas, Drag & Drop API, and regular mouseMove events. However, it seems like whenever im using the mouseMove event for dragging items around the screen, it disables the Drag & Drop api.

For example, Im dragging a tile into one of the slots, nothing happens :( - If I remove the line from the template in Tile.vue

 @mousedown.prevent="updateTilePosition"

It works, however, then I wont have the ability to drag/drop items around the screen. It seems the drag & drop API limits in to the "available slots", and if I try moving one of the tiles in just snaps back to the original position, UNLESS i drag it into one of the available slots then it snaps the tile into the container as expected

The whole code is available here: https://codesandbox.io/s/vue-puzzle-vip9f

Note: Each tile represents a "clip" from the image, using Canvas (However, on Codesandbox it doesn't seem to draw the image, so for the sake of it, just imaging each tile represent something from the main image)

As mentioned, it should work much like the https://goodies.pixabay.com/jquery/snap-puzzle/demo.html - But it seems like the approach im using, it's nearly impossible :( - ANY help would be greatly appreciated