[bug] SortableJS + AlpineJS = x-for visual conflicts

[10YAR]

Hello,

I'm currently struggling on using SortableJS in a AlpineJS project. The problem is that when I drag an element, it does change the index values in the elements array, but visually, it stays the same.

This is how I init SortableJS :

document.addEventListener("DOMContentLoaded", () => {
    new Sortable(document.getElementById("sortableContainer"), {
      animation: 200,
      onStart: function (event) {
         Alpine.store("dashboard").saveOldIndex(event.oldDraggableIndex);
      },
      onEnd: function (event) {
        Alpine.store("dashboard").movePersonne(event.newDraggableIndex);
      }
    });
}); 

If you comment the Alpine.store functions, there's no bug anymore, but then the changed array isn't being saved.

Here's a codepen with the bug encountered : https://codepen.io/10YAR/pen/bGJWMxp

Thank you for your help

I tried without using a store (but a data), and it was worse.