Livewire 3 Alpine Expression Error: Cannot read properties of undefined (reading 'entangle') after upgrade

Hi, I have upgraded to Livewire v3, following the steps outlined in the Upgrade Guide, but I am getting errors with @entangle that I can't resolve. This is for a displaying a modal.

Alpine warnings:
app-4a08c204.js:3 Alpine Expression Error: Cannot read properties of undefined (reading 'entangle')
Expression: "{
    showWaitListAddModal: window.Livewire.find('cvge5VrfBNlLdTtsdUUb').entangle('showWaitListAddModal')

app-4a08c204.js:3 Alpine Expression Error: showWaitListAddModal is not defined
Expression: "showWaitListAddModal"

Errors:
Uncaught TypeError: Cannot read properties of undefined (reading 'entangle')
    at eval (eval at <anonymous> (app-4a08c204.js:7:653), <anonymous>:4:71)
Uncaught ReferenceError: showWaitListAddModal is not defined
    at eval (eval at <anonymous> (app-4a08c204.js:7:653), <anonymous>:3:32)

My component:

<div x-data="{
    showWaitListAddModal: @entangle('showWaitListAddModal')
}" x-show="showWaitListAddModal" x-cloak>
    <div class="fixed z-50 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog"
        aria-modal="true">
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 bg-gray-100/75 transition-opacity" aria-hidden="true">
            </div>
            <div
                class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-lg transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                {{-- modal content --}}
                <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                    {{-- header --}}
                    <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                        <h3 class="font-semibold text-gray-900 dark:text-white">Add Waiting List Item</h3>
                        <button type="button" @click="showWaitListAddModal=false"
                            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-6 h-6 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" 
                            data-dismiss="modal" aria-label="Close">
                            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                            </svg>
                            <span class="sr-only" aria-hidden="true close-btn" @click="showWaitListAddModal=false">Close modal</span>
                        </button>
                    </div>  
                    {{-- body --}}
                    <div class="p-6 space-y-6">
                        <input type="text" wire:model="title">
                        
                        <input type="text" wire:model="description">
                        @error('description') <span class="error">{{ $message }}</span> @enderror
                        <p class="text-md text-base leading-relaxed text-gray-500 dark:text-gray-400">Add an appointment request</p>
                    </div>
                    {{-- footer --}}
                    <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
                        <button type="button" @click="showWaitListAddModal=false"
                            class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-3 py-2 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
                            >Close</button>
                        <button type="button" wire:click="add"
                            class="text-white bg-green-500 hover:bg-green-300 focus:ring-2 focus:outline-none focus:ring-green-100 font-medium rounded-lg text-sm px-3 py-2 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800" data-dismiss="modal"
                            >
                            Yes, Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Its controller:

namespace App\Livewire\Components;

use Livewire\Component;
use App\Models\Customer\Practitioners;
use Livewire\Features\SupportEvents\On;

class WaitingListAdd extends Component
{
    public $showWaitListAddModal = false;
public $title = '';
    public $description = '';

    #[On('showWaitingListAdd') ]
    public function showWaitingListAdd()
    {
        info('here'.$this->showWaitListAddModal);
        $this->showWaitListAddModal = true;
        info('here'.$this->showWaitListAddModal);
    }

    public function render()
    {
        $active_practice = 1;

        $practitioners = Practitioners::where('active', 1)
            ->whereRaw("find_in_set('".$active_practice."',`practices`)")
            ->orderBy('display_order', 'ASC')
            ->get();

        $practitioner_array = $practitioners->keyBy('ID')->toArray();

        return view('livewire.components.waiting-list-add',[
            'practitioners' => $practitioners,
            'practitioner_array' => $practitioner_array,
        ]);
    }
}

I've tried changing @entangle('showWaitListAddModal') to @entangle('showWaitListAddModal').live, without success. Any thoughts would be appreciated.