Elements shift incorrectly on async list updates after `2.3.0` upgrade

[twisterniq]

Hi!

After upgrading from 2.2.1 to 2.3.0, list items shift incorrectly when using v-if on <VueDraggableNext> together with v-bind="{ group: 'test', sort: false }.

• Removing the v-if fixes the issue.
• Removing the group also fixes it, but then items can’t be moved between lists.
• In 2.2.1 this worked correctly, but starting with 2.3.0 the list reorders incorrectly when items are updated asynchronously.
• With a large list that includes additional CSS and animations, the page can enter a loop and become unresponsive for a while.

Minimal reproduction repo: https://github.com/twisterniq/vue-draggable-next-move-error

Relevant code and comparison videos:

<script setup>
import { ref } from 'vue'
import { VueDraggableNext } from 'vue-draggable-next'

const isShown = ref(true)
const items = ref([])

setTimeout(() => {
  isShown.value = false;
  items.value = Array.from({ length: 15 }, (_, i) => ({
    id: i + 1,
    name: `Task ${i + 1}`
  }));
}, 10)

setTimeout(() => {
  isShown.value = true;
}, 15)
</script>

<template>
  <div class="app-container">
    <div class="columns-container">
      <div class="column">
        <h2>Done</h2>
        <VueDraggableNext
          v-model="items"
          class="draggable-list"
          v-bind="{ group: 'test', sort: false }"
        >
          <div
            v-for="item in items"
            :key="item.id"
            class="task-item"
          >
            <h3>{{ item.name }}</h3>
          </div>
        </VueDraggableNext>
      </div>
    </div>
  </div>
</template>

Error video:

video1.mp4

Expected (2.3.0 without v-if):

video2.mp4