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,
  function(event) {
  		values = getSelectValues($refs.{{ $attributes['prettyname'] }});
	    @this.set('{{ $attributes['wire:model'] }}', values);

console.log({!! $attributes['selected'] !!});
items = {!! $attributes['selected'] !!};
	items.forEach(function(select) {
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">
	@foreach($attributes['options'] as $key=>$option)
	<option value="{{$key}}">{{$option}}</option>

Include js and css:

<link rel="stylesheet" href="" integrity="sha512-ZBZn3m8/9BsOpNilGuyxqCm4HwmfC40NR0e6PZxlRgFjNgV+mh0kyaknULcuBoToULdv8zHHcnrT1e6tesoD7Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="[email protected]/public/assets/scripts/choices.min.js"></script>


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

In the view:

   $selected = stripslashes(json_encode($geos));
                <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" />

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?