im using the splide library to create slider. i have a checkbox to enable loop. but i noticed the slider isnt updating when its checked/unchecked UNTIL the customizer is saved. so for example, when opening customizer, i open dev tools, and noticed it remains true when toggling the checkbox, same goes for when initialized as false. when saved, it switches states.

script using shopify:section:load event listener.

document.addEventListener('shopify:section:load', () => {
    let splide;

    function initializeSplide(loopState) {
        console.log("Initializing Splide with loop state:", loopState);
        splide = new Splide('#image-carousel-{{ section.id }}', {
            type   : loopState ? 'loop' : 'slide',
            {% if section.settings.padding %}
            padding: '5rem',
            gap: '20px',
            {% endif %}
            perPage: 1,
        }).mount();
    }

    function reinitializeSplide(loopState) {
        console.log("Reinitializing Splide with loop state:", loopState);
        if (splide) {
            splide.destroy(true); // destroy the instance and remove the added markup
            console.log("Splide instance destroyed");
        }
        initializeSplide(loopState);
    }

    // Initialize Splide on section load
    initializeSplide({{ section.settings.loop }});

});

script using domcontentloaded

document.addEventListener('DOMContentLoaded', () => {
    let splide;

    function initializeSplide(loopState) {
        console.log("Initializing Splide with loop state:", loopState);
        splide = new Splide('#image-carousel-{{ section.id }}', {
            type   : loopState ? 'loop' : 'slide',
            {% if section.settings.padding %}
            padding: '5rem',
            gap: '20px',
            {% endif %}
            perPage: 1,
        }).mount();
    }

    function reinitializeSplide(loopState) {
        console.log("Reinitializing Splide with loop state:", loopState);
        if (splide) {
            splide.destroy(true); // destroy the instance and remove the added markup
            console.log("Splide instance destroyed");
        }
        initializeSplide(loopState);
    }

    // Initialize Splide on section load
    initializeSplide({{ section.settings.loop }});
});

ive been tackling this for a long time with no solution. why is the state not updating immediately? all of this sections code is located in one liquid file. except splide min files which are in the assets folder and linked in theme.liquid.

tried different event listeners but no luck. i feel like it must be something so simple.