Livewire & Select2

I am using Livewire and Slect2 in my project
and I am code to select 2 javascript also but select 2 value is not passed to the database here is my code

My Blade File

    <div class="col-12 col-lg-12 col-sm-12">
        <div wire:ignore>
            <div class="form-group">
                <label for="exampleInputRounded0">Section Name</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-globe-asia text-primary"></i></span>
                    </div>
                    <select class="form-control rounded-0 " wire:model="cr_classes_id" id="cr_classes_id" style="width: 100%;" tabindex="-1" aria-hidden="true">
                        @foreach ($classes as $class)
                        <option value="{{$class->id}}">{{$class->classes_name}}</option>
                        @endforeach
                    </select>
                </div>
                @error('cr_classes_sec_id') <span class="text-danger error">{{ $message }}</span>@enderror
            </div>
        </div>
    </div>

Here is My JS

@push('js')
<script type="text/javascript">

$(document).ready(function () {
$('#cr_classes_id').select2();
$('#cr_classes_id').on('change', function (e) {
    var data = $('#cr_classes_id').select2("val");
    @this.set('cr_classes_id', data);
});
});

</script>
@endpush 

Consol Error

Uncaught TypeError: Cannot read property '$wire' of undefined
    at Livewire.value (index.js:31)
    at HTMLSelectElement.<anonymous> (ClassRooms:844)
    at HTMLSelectElement.dispatch (jquery.min.js:2)
    at HTMLSelectElement.v.handle (jquery.min.js:2)
    at Object.trigger (jquery.min.js:2)
    at HTMLSelectElement.<anonymous> (jquery.min.js:2)
    at Function.each (jquery.min.js:2)
    at k.fn.init.each (jquery.min.js:2)
    at k.fn.init.trigger (jquery.min.js:2)
    at n.select (select2.min.js:2)

without wire:ignore Working find and data send to the database

Hi, i wrote this post about it, that will help you.

Change wire:ignore for wire:ignore.self, that way child elements can remain emitting events that can be wraped.

already try it… not working

Try this

<div class="col-12 col-lg-12 col-sm-12">
        <div wire:ignore.self>
            <div class="form-group">
                <label for="exampleInputRounded0">Section Name</label>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-globe-asia text-primary"></i></span>
                    </div>
                    <select class="form-control rounded-0 " wire:change="$emit('classChanged', $event.target.value)" style="width: 100%;" tabindex="-1" aria-hidden="true">
                        @foreach ($classes as $class)
                        <option value="{{$class->id}}" {{ $cr_classes_id ? 'selected' : ''}} >{{$class->classes_name}}</option>
                        @endforeach
                    </select>
                </div>
                @error('cr_classes_sec_id') <span class="text-danger error">{{ $message }}</span>@enderror
            </div>
        </div>
    </div>

and in component

public $cr_classes_id = '';
public $listeners = [
   'classChanged'
];
......
public function classChanged($value)
{
    $this->cr_classes_id = $value;
}