Strange behavior with AlpineJS and the sort plugin

I have read some documentation / asked Lary, and then I have checked some parts of my code.

I have created a tooltip.

@props([
    'tooltip' => 'Bulle d\'aide',
])

<div
    class="absolute -top-6 -left-1 -translate-x-[100%] whitespace-nowrap px-2 py-0.5 text-gray-300 bg-gray-600 rounded-lg"
    x-data="{
        showTooltip: false,
    }"
    x-init="
        const root = $root.parentElement;

        root.addEventListener('mouseenter', function (e) {
            root.classList.add('relative');
            setTimeout(() => showTooltip = true, 700);
        });

        root.addEventListener('mouseleave', function (e) {
            root.classList.remove('relative');
            showTooltip = false;
        });

        root.addEventListener('mousedown', function (e) {
            root.classList.remove('relative');
            showTooltip = false;
        });
    "
    x-show="showTooltip"
>
    {{ $tooltip }}
</div>

If I remove the tooltip, I don't have any problem while sorting items.

So the problem is that the sorted items have another div that is transformed, what partially changes the DOM, and this disturbs the sort plugin to display the ghost at the right position.

What do you suggest me to do to avoid this problem ?

Curious, do you need the sort plugin. Can't you just orderby (ORDER BY). I always use the database functionally for such things. But again I was just wondering. Also as you know I am old school and stay away from plugins as much as possible.