Laravel Livewire: Cannot read property '$wire' of undefined

Question

I have a problem with laravel livewire. I think the problem is really simple, but I can not solve it. Let me explain everything. I have a daterangepicker (LitePicker), he works perfect, but I want when user select date range value to set this value to the property and filter data. My problem is that I can't set value to the property. my Js Code:

@push('scripts')
<script type="text/javascript">
document.addEventListener('livewire:load', function() {
    var field = document.getElementById('filter-date-range')
    var dateRange;
    var picker = new Litepicker({
        element:field,
        format: 'DD/MM/YYYY',
        lang: 'de',
        singleMode: false,
        onSelect: function(start, end) {
           @this.dateRange = start
        }
    });
})

</script>
@endpush

@this directive is compiled to

onSelect: function(start, end) {
           window.livewire.find('').dateRange = start
        }

I think the problem is here, because parameter which is passed to find function is empty or the id of the component is missing, and I don't know how to fix it. Now here is the the error I received when date is selected:

index.js:30 Uncaught TypeError: Cannot read property '$wire' of undefined
    at Livewire.value (index.js:30)
    at e.onSelect (book_keeping:695)
    at e.r.Litepicker.setDateRange (main.js:12)
    at e.onClick (main.js:12)
    at HTMLDocument.<anonymous> (main.js:12)

As you can see I use push directive so here is the code where I load the scripts

@livewireScripts
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
<script type="text/javascript" src="{{asset('js/app.js')}}"></script>
@stack('scripts')

Also I tried with events wire:model and wire:change without success.

Answer 1

I used like this

document.addEventListener('livewire:load', function() {
        var field = document.getElementById('date-from')
        var picker = new Litepicker({
            element:field,
            lang: 'de',
            autoApply: false,
            singleMode: true,
            numberOfColumns: 1,
            numberOfMonths: 1,
            showWeekNumbers: true,
            format: "D MMM, YYYY",
            dropdowns: {
                minYear: 1990,
                maxYear: null,
                months: true,
                years: true,
            },

            setup: (picker) => {
                picker.on('selected', (date1, date2) => {
                    Livewire.emit('from-selected', date1)
                });
            }
        });
    })

than in livewire

protected $listeners = ['from-selected' => 'fromSelected'];

public function fromSelected($from){
    $this->from = $from;
    $this->resetPage();
}