Vue Draggable не меняет лист при перетаскивании

Как понять какой метод использовать в библиотеки Vue3 draggable чтобы понять из какого листа взяли элемент и в какой лист положили, в моменте когда мы переместили элемент из одного листа и пометили его в другой.

Я полагаю что watcher-ом этого достичь, но я думаю что это плохое решение.

Есть метод move но проблема в том что при перемещении не меняется номер листа. Например на картинке ниже Paul был перемещен из первого листа во второй, но в added он по прежнему числиться в листе 1, хотя добавлен был в лист 2

template

<template>
    <div class="flexgrid-demo p-p-2">
        <div class="p-grid">
                <div class="p-col">
                    <div class="box"><h3>Draggable 1</h3>

            <draggable
                    class="dragArea list-group"
                    :list="list1"
                    :clone="clone"
                    :group="{ name: 'people', pull: pullFunction }"
                    @start="start"
                    item-key="id"
                    @change="dragList"
            >
                <template #item="{ element }">
                    <div class="list-group-item">
                        <div style="border:2px solid; margin-top:10px; padding:10px">
                        {{ element.name }}
                        </div>
                    </div>
                </template>
            </draggable>
                </div>
                </div>

        <div class="p-col">
            <div class="box">


            <h3>Draggable 2</h3>
            <draggable
                    class="dragArea list-group"
                    :list="list2"
                    :clone="clone"
                    @start="start"
                    group="people"
                    item-key="id"
                    @change="dragList"
                    @move="move"
                    @added="added"
            >
                <template #item="{ element }">
                    <div class="list-group-item">
                        <div style="border:2px solid; margin-top:10px; padding:10px">
                            {{ element.name }}
                        </div>
                    </div>
                </template>
            </draggable>
        </div>
        </div>
        </div>
    </div>
</template>

script

<script>
    import draggable from "vuedraggable";
    let idGlobal = 8;
    export default {
        name: "clone-on-control",
        display: "Clone on Control",
        instruction: "Press Ctrl to clone element from list 1",
        order: 4,
        components: {
            draggable
        },
        data() {
            return {
                list1: [
                    { name: "Jesus", id: 1, list:1, uuid: "ffcc4608-3b1b-11ec-8d3d-0242ac130003" },
                    { name: "Paul", id: 2, list:1, uuid: "0649fe6c-3b1c-11ec-8d3d-0242ac130003" },
                    { name: "Peter", id: 3, list:1, uuid: "0e81b8e0-3b1c-11ec-8d3d-0242ac130003" }
                ],
                list2: [
                    { name: "Luc", id: 5, list:2, uuid: "15314048-3b1c-11ec-8d3d-0242ac130003" },
                    { name: "Thomas", id: 6, list:2, uuid: "1a4df63e-3b1c-11ec-8d3d-0242ac130003" },
                    { name: "John", id: 7, list:2, uuid: "20ac6baa-3b1c-11ec-8d3d-0242ac130003" }
                ],

                controlOnStart: true
            };
        },
        methods: {
            clone({name, id, list}) {
                console.log('clone', name, id, list, idGlobal++)
                return {name, id: id, list};
            },
            pullFunction(item) {
                console.log('pullIs', item);
                return this.controlOnStart ? "clone" : true;
            },
            start({originalEvent}) {
                console.log("start")
                this.controlOnStart = originalEvent.ctrlKey;
            },
            move(evt, originalEvent) {
                console.log("move", evt, originalEvent)
            },
        }
    };
</script>