So I have a component in my blade that I want to display the updated value. This value is used to display the correct icon.

The problem with using livewire is that whenever I call togglePinned() it doesn't (2nd if statement) immediately show me the correct icon even though the value is updated in the backend.

 @php
        $isMyTask = $task->assignees->where('id', console_user()->id)->count();
        $task_user = $task->assignees->where('id', auth()->id())->first();
        $read = $task_user?->pivot->read === 1;
        $pinned = $task_user?->pivot->pinned === 1;
    @endphp
(.. some code ..)
<div>
            @if ($isMyTask)
                <a href="#"
                    x-data="{ pinned: @entangle('pinnedTask') }"
                    @click.prevent="$wire.togglePinned(); console.log('pinned', pinned)"
                    @pinned-updated.window="if ($event.detail.task_id === {{ $task->id }}) pinned = $event.detail.pinned"
                    :key="pinned ? 'unpinned-{{ $task?->id }}' : 'pinned-{{ $task?->id }}'">
                    <i :class="pinned ? 'fas fa-fw fa-thumbtack' : 'fal fa-fw fa-thumbtack'" aria-hidden="true"></i>
                </a>
            @endif
            @if ($isMyTask)
                <a href="#" x-tooltip.placement.top.raw="{{ $pinned ? 'Unpin' : 'Pin' }}"
                    wire:click="togglePinned" wire:key="{{ $pinned ? 'unpinned' : 'pinned' }}-{{ $task?->id }}">
                    <i class="{{ $pinned ? 'fas' : 'fal' }} fa-fw fa-thumbtack" aria-hidden="true"></i>
                </a>{{( 'KEY ID' . $task?->id) . ' ' . ($pinned ? 'pinned' : 'unpinned') }}
            @endif
        </div>

This is how my backend look like. Is there a way for me to correctly return the right value after calling togglePinned() so that I could display the correct icon using alpine js?

public function togglePinned()
{
    if (! $this->task) {
        return;
    }

    $currentPinnedState = $this->task->assignees()->where('users.id', auth()->id())->first()->pivot->pinned;
    $this->task->assignees()->where('users.id', auth()->id())->first()->pivot->update([
        'pinned' => ! $currentPinnedState,
    ]);

    $this->pinnedTask = [
        'task_id' => $this->task->id,
        'pinned' => ! $currentPinnedState,
    ];
    
    $this->emit('taskUpdated');
}