livewire: AlpineJs directives not working after component is reloaded

Describe the bug Hi @calebporzio - I’m currently experiencing a weird bug, but I’m not sure if should be raised here or in alpine, so apologize if raised in the wrong place.

So, basically, I have a livewire component that, as part of the HTML it renders, it has a tooltip that uses alpine x-show to display/hide on mouseover. Something like:

<span class="inline-block cursor-pointer relative" x-data="{showTooltip: false}" @mouseenter="showTooltip = true" @mouseleave="showTooltip = false">
    <span x-show="showTooltip" class="absolute h-6 w-20 bottom-0 left-0 -mx-20 -my-1 text-white bg-gray-800 px-2 py-1 text-center text-xs font-semibold opacity-75 rounded ">
        {{ $priority }}
    </span>
</span>

The first time the page is rendered, everything works as expected. However, once the component is reloaded, all the spans that have x-show will ignore that showTooltip is false and show instead, and there’s no way to hide them.

I’ve tried hiding them by default with tailwinds, but then x-show won’t work.

From the docs, I can see that:

Please note that your scripts will be run only once upon the first render of the component. If you need to run a JavaScript function later - emit the event from the component and listen to it in JavaScript as described here)

Does that mean that alpine will work only the first time the component is rendered?