Livewire + noUiSlider после обновления компонента не подгружает ползунки

Blade для Livewire

<div id="priceRangeFilter" data-min="1" data-max="1000"></div>
<input type="text" id="minPrice" value="220">
<input type="text" id="maxPrice" value="1000">

в render Livewire:

$this->dispatch('initRange');

app.js:

document.addEventListener('livewire:initialized', () => {
    initializePriceRangeSlider();
    Livewire.on('initRange', () => {
        initializePriceRangeSlider();
    })
});


function initializePriceRangeSlider() {
    var priceRangeFilter = document.getElementById('priceRangeFilter');
    if (!priceRangeFilter) return;

    const max = parseFloat(priceRangeFilter.getAttribute('data-max'));
    const min = parseFloat(priceRangeFilter.getAttribute('data-min'));
    let minInput = document.getElementById('minPrice');
    let maxInput = document.getElementById('maxPrice');

    if (priceRangeFilter.noUiSlider) {
        priceRangeFilter.noUiSlider.destroy();
    }

    noUiSlider.create(priceRangeFilter, {
        start: [min, max],
        step: 1,
        connect: true,
        range: {
            'min': min,
            'max': max
        },
        format: wNumb({
            decimals: 0
        })
    });

    priceRangeFilter.noUiSlider.on('update', function (values, handle) {
        document.getElementById('rangeValue').innerText = values[0] + ' - ' + values[1];
    });

    priceRangeFilter.noUiSlider.on('end', function (values, handle) {
        minInput.value = values[0];
        maxInput.value = values[1];

        Livewire.dispatch('updatePriceRange', {min: values[0], max: values[1]});
    });
}

После повторного рендеринга компонента не активируется слайдер. Хотя перед повторным созданием сделал destroy. В чем может быть проблема? Спасибо всем :)