Incorrect dom list with reactive array after drag

[gyhyfj]

My code is like this:

<template>
  <Sortable :list="list" item-key="id" :options="options">
    <template #item="{ element }">
      <div class="draggable" :key="element.id">
        {{ element.name }}{{ element.id }}
      </div>
    </template>
  </Sortable>
</template>

<script setup lang="ts">
import { reactive } from "vue"
import { Sortable } from "sortablejs-vue3"

const list = reactive([
  {
    id: "111",
    name: "item1",
  },
  {
    id: "222",
    name: "item2",
  },
])

const options = {
  draggable: ".draggable",
  animation: 150,
  ghostClass: "ghost",
  dragClass: "drag",
  scroll: true,
  forceFallback: true,
  scrollSensitivity: 50,
  scrollSpeed: 10,
  bubbleScroll: true,
}
</script>

If I drag them, then modify list by splice、 push or other methods, the dom list will be incorrect , some item could repeat, even if they have the same id.

For example, if I drag one of the item , and then remove every item in this reactive list, the dom dragged will still stay there. Then I push new item into the list, that Dom will still remain there even if it have the same id with new item

[WaiChungK]

I was facing this issue as well and one workaround way that you can try is that u can put key on the Sortable component based on ur reactive data values that will be changed.

There could be other better ways you could do this such as md5 hashing, but this is just a rough idea.

Again, i don't think this is quite right but it is a workaround to solve the issue.

Crude example:

<Sortable :list="list" item-key="id" :options="options" :key="JSON.stringify(list)">
  <template #item="{ element }">
      <div class="draggable" :key="element.id">{{ element.name }}{{ element.id }}</div>
  </template>
</Sortable>

[lilkimo]

Same issue here (1.2.11), Is this a bug?