VueJS 3 draggable issues - vuejs3

Question

I'm using VueJS 3 with "vue-draggable-next": "^2.1.1".
Nothing happens when I try to drag.
I see in the HTML this:
<div class="flex m-10" data-v-52c58f0f="">
<draggable list="[object Object],[object Object],[object Object],[object Object]" data-v-52c58f0f="">
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">John</div>
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">Joao</div>
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">Jean</div>
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">Gerard</div>`
</draggable>
</div>
When I implement the code like this:
import { VueDraggableNext } from "vue-draggable-next";
components: {
draggable: VueDraggableNext
},
with
list: [
{ name: 'John', id: 1 },
{ name: 'Joao', id: 2 },
{ name: 'Jean', id: 3 },
{ name: 'Gerard', id: 4 },
],
and im the template I already tried:
<draggable class="dragArea list-group w-full" :list="list" #change="log">
<div
class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center"
v-for="element in list"
:key="element.name"
>
{{ element.name }}
</div>
</draggable>
and this:
<draggable
:list="list"
:disabled="!enabled"
item-key="name"
class="list-group"
ghost-class="ghost"
:move="checkMove"
#start="dragging = true"
#end="dragging = false"
>
<template #item="{ element }">
<div class="list-group-item" :class="{ 'not-draggable': !enabled }">
{{ element.name }}
</div>
</template>
</draggable>
In the case where I use
<template #item="{ element }">
Nothing is showing, and in the other case, nothing is draggable.
The component is loaded, I can see it with the Vue extension for Chrome:
Does anyone have any idea why it is not working?

Answer 1

You did not correctly import the vue draggable package.
Do it like this:
import { VueDraggableNext } from "vue-draggable-next";
and after that use it like this:
<draggable :list="list">
<div
class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center"
v-for="element in list"
:key="element.name"
>
{{ element.name }}
</div>
</draggable>
Hope it works!!

Answer 2

Edit: This is an example, why you should post your whole code...
So, after hours and hours of trying different things, I came across that I have added, components: to the data().
Now, it works fine with this:
export default {
components: {
draggable: VueDraggableNext },
and this is what I was doing:
data() {
return {
components: {
draggable: VueDraggableNext
},
Hope this helps someone in the future...