AlpineJS doesn't update when using dynamically loaded model with Livewire

I am loading a model via events in Livewire, but when I populate the model, X-data doesn't update...

For example:

edit.php

<?php

namespace App\Contacts\Http\Controllers;

use App\Contacts\Models\Contact;
use App\Contacts\Models\Enums\ContactTypeEnum;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Facades\Redirect;
use Livewire\Component;

class ContactEdit extends Component
{
    /**
     * Listen to events
     *
     * @var string[]
     */
    protected $listeners = [
        'contact:edit' => 'open',
    ];

    /**
     * Contact model
     *
     * @var \App\Contacts\Models\Contact
     */
    public Contact $contact;

    /**
     * Show the modal
     *
     * @var bool|null
     */
    public bool $open = false;

    /**
     * Rules for the form
     *
     * @var string[]
     */
    protected array $rules = [
        'contact.name'        => 'required',
    ];

    /**
     * @return \Illuminate\Contracts\View\View
     */
    public function render(): View
    {
        return view('contacts::scenes.edit');
    }
    
    /**
     * Open the modal
     *
     * @param \App\Contacts\Models\Contact $contact
     * @return void
     */
    public function open(Contact $contact): void
    {
        $this->contact = $contact;
        $this->open = true;
    }
}

Now in my edit.blade, when I emit an event from another component to populate the model above, my x-data doesn't update

edit.blade.php

<div x-data="{ name: '{{ $contact->name ?? null }}' }">
    <span x-text="name"></span>
</div>

The span stays empty, but the html (inspect element) shows the name, how can I get x-data to update?