I have an alpine.js component with livewire data save. https://github.com/TerrePorter/CustomCountrySelectBox.git

I am trying to load two and eventually three of these in sequence on the page. First, the country then when that is selected, I update the state/region, and finally when that is updated I update the city.

The problem is when I update the state/region the alpine.js code does not execute when livewire refreshed that part of the page.

I also tried to make it work all on one page, a select box that updates the next select box, but it would always fail to load the second array.

Here is the relevant part of the template

<div class="p-6">
    <lable>Please select your location: </lable>
    @if ($country == '')
        @component('components.country-select-box', ['countryJson' => $countryJson])@endcomponent
    @endif
    @if ($stateJson != '')
        @component('components.state-select-box', ['stateJson' => $stateJson])@endcomponent
    @endif
</div>

Here is part of the livewire code where I update the state's JSON file.

   public function updatedCountry() {
        $this->stateJson = $this->getStateJson();
    }

   public function getStateJson() {

        $r = Countries::where('short_name', '=', $this->country)->with('states')->first();

        $ret = [];
        foreach ($r->states as $index => $item) {
            $ret[] = ['title' => $item->state_name, 'value' => $item->id];
        }

        return json_encode($ret);
    }

And finally as mentioned before this is the select box dropdown I am using, https://github.com/TerrePorter/CustomCountrySelectBox.git