Using ChoiceJS on Livewire component V.1

LivewireClassBase.php

class ItemChartExample extends Component
{
  public $singleChoiceValue;
  public $multipleChoiceValue;

  //just example method to triggered
  public function testSubmitPreview() {
    // it's should be work
    dd($singleChoiceValue, $multipleChoiceValue);
  }
}

multiple-choice.blade.php

<div class="mb-3" wire:ignore>
    <label for="multi_select" class="form-label">Select Which is to be selected</label>
    <select
        id="multi_select"
        class="form-control"
        x-data
        x-ref="multi_select_ref"

        x-init="
            new Choices($refs.multi_select_ref,{
                //optional, if you want to add something like removeButton
                removeItemButton: true
            })

            $refs.multi_select_ref.addEventListener('change', (event) => {
                // you might need conditional in future using event.target.hasAttribute('multiple'), but that's optional
                
                var model = Array.from(event.target.selectedOptions).map(option => option.value)
                $wire.multipleChoiceValue = model
            })

        "
      >
        @foreach ($items as $item)
            <option value="{{ $item->id }}">{{ $item->name }}</option>
        @endforeach
    </select>
    <button type="button" class="btn btn-success" wire:click.prevent="testSubmitPreview">Preview</button>
</div>

select-single.blade.php

<form>
  <div class="mb-3" wire:ignore>
    <label for="single_select" class="form-label">Select your single Choice</label>
    <select name="single_select" id="single_select" class="form-control"
        x-data
        x-ref="single_select_ref"
        x-init="
            new Choices($refs.single_select_ref)

            $refs.ujian_id.addEventListener('change', (event) => {
                var model = event.target.value
                $wire.singleChoiceValue = model
            })
        "
    >
        <option value="">Pilih Ujian</option>
        @foreach ($items as $item)
            <option value="{{ $item->id }}">{{ $item->name }}</option>
        @endforeach
    </select>
  </div>
  <button type="button" class="btn btn-success" wire:click.prevent="testSubmitPreview">Preview</button>
</form>