Vue-draggable-next v-for kill the connection with original list

Question

I want to create more groups to move items around from one to another. Given the following lists and draggable options:

<script setup>
import { computed, ref } from 'vue';
import { VueDraggableNext as draggable } from 'vue-draggable-next'

const dragOptions = computed(() => {
    return {
        animation: 200,
        group: { name: 'people', put: true },
        disabled: false,
        ghostClass: "ghost"
    };
})

let list1 = ref([
    { name: "dog 1", id: 1 },
    { name: "dog 2", id: 2 },
    { name: "dog 3", id: 3 },
    { name: "dog 4", id: 4 }
]);

let list2 = ref([
    { name: "cat 5", id: 5 },
    { name: "cat 6", id: 6 },
    { name: "cat 7", id: 7 }
]);


let list3 = ref([
    { name: "cat 5", id: 5 },
    { name: "cat 6", id: 6 },
    { name: "cat 7", id: 7 }
]);

let lists = [list1, list2, list3]

</script>

If I use the lists between separate draggable tags, it works as it should:

<div class="col-3">
        <h3>Draggable 2</h3>
        <draggable v-bind="dragOptions" class="dragArea list-group" :list="list2" @change="log">
            <div class="list-group-item" v-for="element in list2" :key="element.id">
                {{ element.name }}
            </div>
        </draggable>
    </div>

    <div class="col-3">
        <h3>Draggable 2</h3>
        <draggable v-bind="dragOptions" class="dragArea list-group" :list="list3" @change="log">
            <div class="list-group-item" v-for="element in list3" :key="element.id">
                {{ element.name }}
            </div>
        </draggable>
    </div>

    <rawDisplayer class="col-3" :value="list2" title="List 2" />

    <rawDisplayer class="col-3" :value="list3" title="List 3" />
</div>

But, if I put the lists into another list and iterate over it with one draggable tag, it will give me an exception:

<div class="col-3" v-for="list in lists" :key="list.name">
        <h3>Draggable 1</h3>
        <draggable v-bind="dragOptions" class="dragArea list-group" :list="list" @change="log">
            <div class="list-group-item" v-for="element in list1" :key="element.id">
                {{ element.name }}
            </div>
        </draggable>

        <rawDisplayer class="col-3" :value="list" title="List 1" />
    </div>
</div>

The exception is:

vue-draggable-next.esm-bundler.js:3269 Uncaught TypeError: list.splice is not a function
at spliceList (vue-draggable-next.esm-bundler.js:3269:47)
at Proxy.alterList (vue-draggable-next.esm-bundler.js:3261:17)
at Proxy.spliceList (vue-draggable-next.esm-bundler.js:3270:18)
at Proxy.onDragRemove (vue-draggable-next.esm-bundler.js:3328:18)
at Sortable.<anonymous> (vue-draggable-next.esm-bundler.js:3070:36)
at dispatchEvent (vue-draggable-next.esm-bundler.js:911:21)
at _dispatchEvent (vue-draggable-next.esm-bundler.js:958:3)
at Sortable._onDrop (vue-draggable-next.esm-bundler.js:2209:13)
at Sortable.handleEvent (vue-draggable-next.esm-bundler.js:2291:14)