im using splide js for sliders. its currently functioning but one thing thats bugging me is i have a checkbox allowing users to enable loop which works BUT only updates once customizer is saved. i want to show these changes in live time. script and part of schema is below.

the script below is inside the same file as the liquid.

<script>
document.addEventListener('DOMContentLoaded', function() {
    let splide;

    function initializeSplide() {
        let typeSetting = {% if section.settings.loop %}'loop'{% else %}'slide'{% endif %};
        splide = new Splide('.splide', {
            type   : typeSetting,
            padding: '5rem',
            gap: '20px'
        }).mount();
        console.log("Splide initialized");
    }

    function reinitializeSplide() {
        if (splide) {
            splide.destroy();
            console.log("Splide destroyed");
        }
        initializeSplide();
    }

    initializeSplide();

    if (Shopify.designMode) {
        document.addEventListener('shopify:section:load', () => {
            console.log("loaded");
            reinitializeSplide();
        });
    }
});
</script>

portion of schema

        {
            "type": "checkbox",
            "id": "autoplay",
            "label": "Autoplay",
            "default": false
        },

the console correctly logs “loaded” anytime something is checked yet customizer is not reflecting these changes.

for context, the splide min files are uploaded in assets folder and linked in theme.liquid file.

tried multiple event listeners, console logging to debug.