Uncaught TypeError: Cannot read properties of undefined (reading '$wire') - Livewire

I am new to Livewire Laravel, I want to set values using JS of laravel component.

HTML

 <input wire:model="minprice" type="text开发者_如何学Python">
    <button type="button" id="updateFilter" class="btn btn-white">{{ __("Apply") }}</button>

JS

 const updateFilter = document.querySelector('#updateFilter');
    updateFilter.addEventListener('click', updateFilterFun);

    function updateFilterFun() {
        console.log("Asd");
        @this.set('minprice', 1489354, true);
        @this.$refresh();
    }

But it throws me this error

index.js:32 Uncaught TypeError: Cannot read properties of undefined (reading '$wire') at Livewire.value (index.js:32:60) at HTMLButtonElement.updateFilterFun (projects:524:25)

I have tried to use Alphine JS yet failed, Some docs are telling me to add it in head tag some are telling me to load it after livewire. Can someone help me out on this?

I don't know if this will help. I had the same issue using price slider widget on a livewire component. I ended up using following code for my price slider:

HTML:

<div class="widget mercado-widget filter-widget price-filter" style="margin-top: 20px !important;">
    <h2 class="widget-title" style="margin-bottom: 10px;">{{__('Filter by price')}}</h2>
    <div class="widget-content" wire:ignore>
        <div id="slider-range"></div>
        <p>
            <label for="amount">{{__('Price')}}:</label>
            <input type="text" id="amount" readonly>
        </p>
    </div>
</div>

JS:

if ($("#slider-range").length > 0) {
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 1000,
        values: [0, 1000],
        slide: function (event, ui) {
            $("#amount").val("€" + ui.values[0] + " - €" + ui.values[1]);
            @this.set('min_price', ui.values[0]);
            @this.set('max_price', ui.values[1]);
        }
    });
    $("#amount").val("€" + $("#slider-range").slider("values", 0) +
        " - €" + $("#slider-range").slider("values", 1));
}