Select2 multiple - Livewire/Alpine

select2.blade.php

<div
    x-data="{
        model: @entangle($attributes->wire('model')),
    }"
    x-init="
        select2 = $($refs.select)
            .not('.select2-hidden-accessible')
            .select2({
                theme: 'bootstrap',
                dropdownAutoWidth: true,
                width: '100%',
                minimumResultsForSearch: 10,
            });

        select2.on('select2:select', (event) => {
            model = Array.from(event.target.options).filter(option => option.selected).map(option => option.value);
        });

        select2.on('select2:unselect', (event) => {
            model = Array.from(event.target.options).filter(option => option.selected).map(option => option.value);
        });

        $watch('model', (value) => {
            select2.val(value).trigger('change');
        });
    "
    wire:ignore
>
    <select x-ref="select" {{ $attributes->merge(['class' => 'form-control']) }}>
        {{ $slot }}
    </select>
</div>

usage.blade.php

<label for="filter-student-status">{{ __('Invoice status') }}</label>
<x-select2 id="filter-student-status" wire:model.defer="filters.invoice-status" multiple>
    @foreach($this->invoiceStatuses as $status)
        <option value="{{ $status->id }}">{{ $status->name }}</option>
    @endforeach
</x-select2>

Thank you so much!

Working example with choice js: https://github.com/Choices-js/Choices

<div
    x-data="{
        model: @entangle($attributes->wire('model')),
    }"
    x-init="
        select2 = new Choices($refs.select, {
                position: 'bottom',
                searchPlaceholderValue: '{{__('Search...')}}',
                shouldSort: false,
                itemSelectText: '',
            })
        $refs.select.addEventListener('change', (event)=>{
            if (event.target.hasAttribute('multiple')){
                model = Array.from(event.target.options).filter(option => option.selected).map(option => option.value);
            }else{
                model = event.target.value;
            }
        });
    "
    wire:ignore
>
    <select x-ref="select" {{ $attributes->merge(['class' => '']) }}>
        {{ $slot }}
    </select>
</div>

@harish81 Thank You, I've test Your code, and it's working good with choices.
One thing which is broken is because of using wire:ignore it can't dynamically refresh changed data (options are dependent on other select).
I'm struggling with this with no success

i am getting this error any idea?

Hello it is working with multiple option but not single choice. It is not filtering