Incorrect visual representation after transferring all items between groups in VueDraggableNext?

Question

I need to make a wrapper component to sort elements on a page. I took the VueDraggableNext component as a basis. Here is the source code: https://codesandbox.io/p/devbox/sortable-98v3lk

<template>
  <draggable v-model="items" v-bind="$attrs" @end="onDragEnd">
    <slot></slot>
  </draggable>
</template>

<script>
import { VueDraggableNext } from "vue-draggable-next";

export default {
  name: "Sortable",
  components: {
    draggable: VueDraggableNext,
  },
  props: {
    modelValue: {},
  },
  data() {
    return {
      items: this.modelValue,
    };
  },
  computed: {
    result() {
      if (this.modelValue) {
        return this.modelValue.map((item) => item.id);
      }
    },
  },
  methods: {
    onDragEnd(event) {
      this.$emit("update:modelValue", [...this.items]);

      // Send to server result ...
    },
  },
};
</script>

<template>
  <p>Sortable by vue-draggable-next component.</p>
  <div class="accordion">
    <Sortable v-model="response">
      <div
        class="accordion-item"
        v-for="tab in response"
        :key="tab.id"
        :data-group-id="tab.id"
      >
        <strong>{{ tab.title }}</strong>
        <ol>
          <Sortable v-model="tab.fields" group="fields">
            <li
              v-for="field in tab.fields"
              :key="field.id"
              :data-item-id="field.id"
            >
              {{ field.title }}
            </li>
          </Sortable>
        </ol>
      </div>
    </Sortable>
  </div>
  <pre>{{ JSON.stringify(response, null, 2) }}</pre>
</template>

<script>
import Sortable from "./components/Sortable.vue";

export default {
  components: { Sortable },
  data() {
    return {
      response: [
        {
          id: "9bf916f0-943b-4e59-8f23-dbe0fc80b010",
          resource_id: "9bf916d6-db50-4fc2-8fa2-5755f0958b4c",
          title: "Tab 1",
          position: 1,
          fields: [
            {
              id: "9bf91709-184d-4c3c-88e0-7d7b836573c7",
              resource_id: "9bf916d6-db50-4fc2-8fa2-5755f0958b4c",
              tab_id: "9bf916f0-943b-4e59-8f23-dbe0fc80b010",
              title: "Title",
            },
            {
              id: "9bf9171f-b2ea-41dd-8ca7-9d5790e0d1bb",
              resource_id: "9bf916d6-db50-4fc2-8fa2-5755f0958b4c",
              tab_id: "9bf916f0-943b-4e59-8f23-dbe0fc80b010",
              title: "Description",
            },
          ],
        },
        {
          id: "9bf9172b-a539-4986-9079-414cc64faea4",
          resource_id: "9bf916d6-db50-4fc2-8fa2-5755f0958b4c",
          title: "Tab 2",
          fields: [
            {
              id: "9bfa6541-39ca-41f7-bf1a-3402aaa46a6a",
              resource_id: "9bf916d6-db50-4fc2-8fa2-5755f0958b4c",
              tab_id: "9bf9172b-a539-4986-9079-414cc64faea4",
              title: "Keywords",
            },
          ],
        },
      ],
    };
  },
};
</script>

I am currently experiencing an issue with the VueDraggableNext component, where visually, one item appears to persist in its original group after all items have been dragged to another group. Although the underlying data model updates correctly (i.e., the data reflects that all items have been moved), the DOM does not update accordingly, leaving a visual artifact of the last moved item in the original group.

Steps to Reproduce:

• Drag all items from one group to the other.

While the data model correctly reflects all items as being part of the new group, one element remains visually in the old group.

The task is to create a wrapper component, the content is transmitted through the slot.

I tried to specify different indexes, different versions of the library, but there was no result.

I tried to specify different indexes, different versions of the library, but there was no result.