Livewire Select Dropdown Reverts to Old Value After Update – View Not Updating Properly

Hi everyone, I'm working on a Livewire component where I manage guest seat assignments for an event.

The setup:

• I have a list of guests and a list of seats.
• Each seat can have one guest assigned (guest_id).
• Guests that are already assigned to a seat should no longer be available as options in the dropdown.
• I'm displaying each seat as a select dropdown. The available options in each select are only the guests who don't yet have a seat assigned.
• When I select a guest from the dropdown, the change should be saved to the database immediately via wire:change.

The problem: When I select a different guest for a seat:

• The new selection briefly appears in the dropdown.
• But then it immediately reverts back to the previous value (even though the correct value is saved in the database).
• After a full page reload, the correct updated value appears as expected.
• It seems like the seatGuestMap is updated correctly, and the database reflects the change, but the view is not re-rendering correctly right away.

I've tried a few different approaches to handle this, including tweaking how data is refreshed and how models are bound, but I keep running into the same issue.

Here is the relevant code:

class TableManagerComponentFix extends Component
{
    public $seats = [];
    public $guests = [];
    public $seatGuestMap = [];

    public function mount()
    {
        $this->refreshData();
    }

    public function refreshData()
    {
        $this->seats = Seat::orderBy('seat_number')->get();
        $this->seatGuestMap = $this->seats->pluck('guest_id', 'id')->toArray();
        $this->guests = Guest::doesntHave('seat')->orderBy('name')->get();
    }

    public function updateSeatGuest($seatId)
    {
        $guestId = $this->seatGuestMap[$seatId] ?? null;
        if ($guestId === "") {
            $guestId = null;
        }

        Seat::where('id', $seatId)->update(['guest_id' => $guestId]);

        $this->refreshData(); // Trying to refresh view state
    }

    public function render()
    {
        return view('livewire.components.table-manager-component-fix');
    }
}

And blade file:

<div class="space-y-6">
    <ol>
        @foreach($seats as $seat)
            <div wire:key="seat-{{ $seat->id }}" class="p-2 border border-gray-300 mb-2">
                <p>Seat {{ $seat->seat_number }}</p>

                <select wire:model.lazy="seatGuestMap.{{ $seat->id }}" wire:change="updateSeatGuest({{ $seat->id }})">
                    <option value="">-- Select guest --</option>
                    <option value="{{ $seat->guest_id }}" selected>
                        {{ $seat->guest->name ?? 'null' }}
                    </option>
                    @foreach($guests as $guest)
                        <option value="{{ $guest->id }}">
                            {{ $guest->name ?? 'Guest #' . $guest->id }}
                        </option>
                    @endforeach
                </select>
            </div>
        @endforeach
    </ol>
</div>