Choice.js custom component

What seems to be the problem: Initial selected options doesn’t show up dynamically

Steps to Reproduce: use the code below

Are you using the latest version of Livewire: yes

Do you have any screenshots or code examples:

Choice.js custom component:

<div x-data x-init="() => {
var choices = new Choices($refs.{{ $attributes['prettyname'] }}, {
	itemSelectText: '',
	removeItems: true,
    removeItemButton: true,
});
choices.passedElement.element.addEventListener(
  'change',
  function(event) {
  		values = getSelectValues($refs.{{ $attributes['prettyname'] }});
	    @this.set('{{ $attributes['wire:model'] }}', values);
  },
  false,
);

console.log({!! $attributes['selected'] !!});
items = {!! $attributes['selected'] !!};
if(Array.isArray(items)){
	items.forEach(function(select) {
		choices.setChoiceByValue((select).toString());
	});
}
}
function getSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;
  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];
    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}
">
<select id="{{ $attributes['prettyname'] }}" wire-model="{{ $attributes['wire:model'] }}" wire:change=".   {{ $attributes['wire:change'] }}" x-ref="{{ $attributes['prettyname'] }}" multiple="multiple">
	@if(count($attributes['options'])>0)
	@foreach($attributes['options'] as $key=>$option)
	<option value="{{$key}}">{{$option}}</option>
	@endforeach
	@endif
    </select>
</div>

Include js and css:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/choices.js/9.1.0/choices.min.css" integrity="sha512-ZBZn3m8/9BsOpNilGuyxqCm4HwmfC40NR0e6PZxlRgFjNgV+mh0kyaknULcuBoToULdv8zHHcnrT1e6tesoD7Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/scripts/choices.min.js"></script>

Variables:

$geos = ['DE','US'];
$options= ['DE', 'US', 'GB'];

In the view:

  @php
   $selected = stripslashes(json_encode($geos));
  @endphp
                <div x-data wire:ignore key="cr_classes_id_key" class="mb-6">
                    <x-select wire:model="geos" prettyname="modelprettyname" :options="$options" :selected="$selected" id="geos" />
                </div>

This is working but now when i load dynamically the options by changing the “$geos” variable. I want an edtit function where the input is already filled. It’s like the input is not reactive.

This component is based on this post: Select and Select Multi

shut down? When did this forum get shut down?