VueJS 3 draggable issues

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?

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...