Why when you put a <draggable> in a v-for it breaks the animation and the group inside a v-for doesn't work?

[afi-dev]

<template>
  <div>
    <div v-for="(list, index) in lists" :key="index">
      <VueDraggable
        class="bg-gray-200 p-3 rounded"
        :items="list"
        group="lists"
        animation="150"
        :ghostClass="'bg-red-500'"
        @change="handleListChange(index, $event)"
      >
        <div class="cursor-move h-30 bg-gray-500/50 rounded p-3" v-for="item in list" :key="item.id">
          {{ item.name }}
        </div>
      </VueDraggable>
      <button @click="addItem(index)">Add Item</button>
    </div>
    <button @click="addList">Add List</button>
  </div>
  <pre>{{ lists }}</pre>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';

export default defineComponent({
  name: 'App',
  components: {
    VueDraggable,
  },
  setup() {
    const lists = ref([
      [
        { name: 'Joao', id: 1 },
        { name: 'Jean', id: 2 },
        { name: 'Johanna', id: 3 },
        { name: 'Juan', id: 4 },
      ],
    ]);

    const addList = () => {
      lists.value.push([]);
    };

    const addItem = (index) => {
      const newListLength = lists.value[index].length + 1;
      const newItem = { name: `New Item ${newListLength}`, id: newListLength };
      lists.value[index].push(newItem);
    };

    const handleListChange = (index, newList) => {
      lists.value[index] = newList;
    };

    return { lists, addList, addItem, handleListChange };
  },
});
</script>

My problem is that I can't move any element to another group and I don't understand why, even though it's the same group, the animation doesn't work. (And ghostclass dont work :/ with tailwindcss class)

[Aaron-zon]

v-model binding is required.