Without ID, an unusual behavior occurs when moving between lists

[dennismetz]

Without an id field in the object, transferring an entry between lists is not functional. As a result, some entries may suddenly disappear or be deleted.

Component: https://pastebin.com/b9x1FF1Q

    <div class="row">
        <div class="col-6">
            <VueDraggable
                class="list-group"
                v-model="list1"
                animation="150"
                ghostClass="ghost"
                group="people"
            >
                <div
                    v-for="item in list1"
                    :key="item.no-id"
                    class="list-group-item"
                >
                    {{ item.name }}
                </div>
            </VueDraggable>
        </div>
        <div class="col-6">
            <VueDraggable
                class="list-group"
                v-model="list2"
                animation="150"
                group="people"
                ghostClass="ghost"
            >
                <div
                    v-for="item in list2"
                    :key="item.no-id"
                    class="list-group-item"
                >
                    {{ item.name }}
                </div>
            </VueDraggable>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
const list1 = ref([
    {
        "name": "test",
        "no-id": "employees.id"
    },
    {
        "name": "active",
        "no-id": "employees.active"
    },
    {
        "name": "firstname",
        "no-id": "employees.firstname"
    },
    {
        "name": "lastname",
        "no-id": "employees.lastname"
    }
])
const list2 = ref([
    {
        "name": "short",
        "no-id": "employees.short"
    },
    {
        "name": "birthday",
        "no-id": "employees.birthday"
    },
    {
        "name": "number",
        "no-id": "employees.number"
    },
    {
        "name": "fullname",
        "no-id": "employees.fullname"
    }
])
</script>