Bug When moving last element to then adding another one

[Ratinax]

Hello I have found a bug that displays the elements in the wrong order: Screencast from 2024-10-25 08-20-24.webm

To reproduce:

• 1. Having 2 VueDraggable, "VueDraggable 1" with pull 'clone' and put false and "VueDraggable 2" whatever
• 2. Addind 2 items from "VueDraggable 1" in "VueDraggable 2"
• 3. Reverse them
• 4. Adding Another item in "VueDraggable 2"

For more detail it occures when:

• 1. Moving last element to another place
• 2. Adding another element
• 3. Moving an element in last place

For more detail here's my code:

<!-- VueDraggable 1 -->
<VueDraggable
          group="items"
          :animation="150"
          v-model="itemList"
          >

        <v-card class="mr-2" :key="index" v-for="(element, index) in itemList" variant="outlined">
          <div>
            <span>{{index}} {{ element.name }}</span>
          </div>
        </v-card>
      </VueDraggable>

<!-- VueDraggable 2 -->
<VueDraggable
            v-model="items"
            :group="{ name: 'items', pull: 'clone', put: false }"
            :sort="false"
        >
          <v-card class="ma-1 pa-2 list-group-item" v-for="(criteria, index) in criteriaList" :key="criteria.id"
                  :color="criteria.color" variant="outlined">
            {{ criteria.name[0] }} {{ index }}
          </v-card>
        </VueDraggable>

<script setup lang="ts">
const itemList: Ref = ref([]);

const items = ref([
  {"id": 1, "name": "item1"},
  {"id": 2, "name": "item2"},
  {"id": 3, "name": "item3"},
]);
</script>

[Ratinax]

Sorry I didn't took a look at the FAQ section on the doc, my bad