Trying to replicate this in an app, but not getting same output.

The select option and button to select shows when $selectedOption is empty array, and hidden when when value is selected. But the content div doesnt show after data is populated.


### Class

public array $options = [
	['id' => 1, 'name' => 'Option 1'],
	['id' => 2, 'name' => 'Option 2'],
	['id' => 3, 'name' => 'Option 3'],
];

public ?array $selectedOption  = [];

public option($id) {

		$this->selectedOption = collect($this->options)->where( 'id', $id)->first() ??  []; 
	
}



### Blade

<div x-data="{
	item: null,
	selectThetem() {
		$wire.option(this.item);
	},
	SelectNewtem() {
		$wire.selectedOption = [];
	}
}">

<div wire:cloak wire:show="selectedOption.length == 0">
	<select x-model="item">
		<option value="">Select</option>
		@foreach($options as $value)
			<option value="{{ $value['id'] }}">{{ $value['name']  }} </option>
		@endforeach
	</select>

	<button @click="selectThetem">Select</button>
</div>

<div wire:cloak wire:show="selectedOption.length > 0" class="text-gray-100">
	<dv wire:text="selectedOption.name"></div>

	<div class="my-8" >
		<button @click="SelectNewtem">Change Option</button>
	</div>
</div>


</div>

Optimistic UI with wire:show