JS plugin not working on Livewire update

I got the same problem. When livewire refresh dom, splide is not remounted. wire:ignore will works only if you don't have to refresh parts of content. I resolve this by emiting an event when variable change :

public function updated($name, $value){
        if(in_array($name , ['var1', 'var2', '...'])){
            $this->emit('reinitSplide');
        }
    }

And then in JS :

let message_splide = new Splide( '.splide', message_splide_options ).mount();

    Livewire.on('reinitSplide', () => {
        if (message_splide) {
            message_splide.destroy();
        }
        message_splide = new Splide('.splide', message_splide_options ).mount();
    });

You can also use the native event at all refresh :

let message_splide = new Splide( '.splide', message_splide_options ).mount();

    document.addEventListener('livewire:update', function () {
        if (message_splide) {
            message_splide.destroy();
        }
        message_splide = new Splide('.splide', message_splide_options ).mount();
    });

you can use @script @endscript

It will run javascript on every livewire request

For me in livewire 3 the event with $this->dispatch('reinitSplide'); doesn't work. It being launched but the result it is that the slider is begin loaded but then hided, I don't know why.

So I've found another solution, i used wire:ignore on the block of the slide, I've used the event on render function of livewire and then I change the slider script inside the view with:

document.addEventListener('DOMContentLoaded', function () {
        window.splideInstance = new Splide( '#anni-carousel', message_splide_options ).mount();
        Livewire.on('reinitSplide', (slideNumber) => {
            window.splideInstance.go(slideNumber);
        })      
    }); 

I hope that will help.

I solved this using Alpine:

	<div x-data="{swiper: null}" x-init="swiper = new Swiper($refs.cont, {
			autoplay: true,
			loop: true,
			slidesPerView: 1,
		})" class="relative w-full">

		<div class="swiper" x-ref="cont">
				...
		</div>
    </div>

and it will basically re-init swiper each time.

Aquí tienes la traducción mejorada:

"If you're using a button, try removing the [type="button"] attribute from the tag. I saw that recommendation because something seems to go wrong when that attribute is left in place."