How to Implement GlideJS in Laravel Vite

I want to implement GlideJS with Vold in Laravel Vite. GlideJS can work well when the page is reloaded, but GlideJS doesn't work when moving pages by hot reloading using Volt. Here is the code I have created:

app.js

import 'bootstrap';
import Glide, { Autoplay, Controls } from '@glidejs/glide/dist/glide.modular.esm';


document.addEventListener('DOMContentLoaded', (event) => {
    if (document.querySelector('.related-posts')) {
        const relatedPosts = new Glide('.related-posts', {
            type: 'carousel',
            autoplay: 2000,
            hoverpause: false,
            perView: 1,
            peek: {
                before: 100,
                after: 50
            }
        });

        relatedPosts.mount({Autoplay, Controls});
    }
});

Here, I've inserted a video link on how GlideJS works: https://streamable.com/9ahogy

What is the correct way for GlideJS to work when the page is reloaded and when moving pages by hot reloading with Volt?

I have resolved this issue by changing the event listener to alpine:navigated

document.addEventListener('alpine:navigated', (event) => {

});