Coupled html selects problem

Hello,

I am trying to understand the way livewire works and I’m using two select for a little tag manager interface. The purpose is to choose a tag category in the first select, then the second select will be populated by data (tags) for this tag category. When the component is first displayed, the tag category select will display “select a category” and the tag select will display nothing. When I change the category, I expect the tag select to display the first tag of each category. This doesn’t work when going from the first selection “select a category” to another tag category, but it works well when switching between tag categories. I don’t understand how the second select (tags) is updated and thus the described behavior. I paste below my code, where I have replaced call to the database by arrays, to make it simpler if anyone wants to try it.

Livetags.php

class Livetags extends Component {

public $catSelectedId;
public $selTagId;
public $tagCats;
public $tagtable;
public $tags;

public function mount()
{
    $this->tagCats = ['cat A','cat B','cat C','cat D','cat E'];
    $this->catSelectedId = 0;
    $this->selTagId = 1;
    $this->tagtable = array(
        array('0' => 'tagA1','tagA2'),
        array('1' => 'tagB1','tagB2','tagB3'),
        array('2' => 'tagC1','tagC2','tagC3'),
        array('3' => 'tagD1','tagD2','tagD3','tagD4'),
        array('4' => 'tagE1','tagE2','tagE3'));
}

public function render()
{
    if ($this->catSelectedId != 0)
        //$this->tags = Tag::where('tagcat_id', $this->catSelectedId)->get();
        $this->tags = $this->tagtable[$this->catSelectedId-1];
    else $this->tags = [];
    return view('livewire.livetags');
}
}

Livetags.blade.php

indent preformatted text by 4 spaces
<pre><code class="lang-auto">

<div> 
<div class="my-5"> 
  <select wire:model="catSelectedId" class="h-8 text-xs sm:text-sm md:w-60   w-40" name="tag-categories" id="tag-categories">
    <option value="0">--Please choose a category--</option> 
    @foreach($tagCats as $tagCat)
        {{--<option value="{{ $tagCat->id }}">{{ $tagCat->keyword }}</option>--}} <option value="{{$loop->index+1}}">{{ $tagCat}}</option>
    @endforeach
  </select>
</div>
<div class="my-5">
  <select {{--wire:model="selTagId"--}} class="h-8 text-xs sm:text-sm md:w-60 w-40" name="Tag" id="Tag">
    @foreach($tags as $tag)
      <option value="{{ $loop->index }}" label="{{ $tag }}">{{ $tag }}</option>
    @endforeach
  </select>
</div>
<div class="my-5">
  <input value="{{$catSelectedId}}">
  <input value="@if ($catSelectedId != 0) {{$tagCats[$catSelectedId-1] }}@endif">
  <input value="{{count($tags)}}">
</div>
<div class="my-5">
  @foreach($tags as $tag) {{$tag}} @endforeach
</div>
</div> 

`