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

[natecorkish]

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 like so:

<button wire:click="$emit('contact:edit', 1)">Edit model 1</button>

my x-data updates, but it doesn't re-render,

edit.blade.php

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

The span stays empty (because on the initial Livewire render, the model doesn't exist), but the html (inspect element) shows the name, how can I get x-data to update?

[SimoTod]

https://laravel-livewire.com/docs/2.x/alpine-js look for entangle

[natecorkish]

Unfortunately, entangle won't work, because when the component is first initialised, the contact.type doesn't exist because Ive not populated it with the event.

 $this->contact = $contact;

[SimoTod]

You can update your x-text so it check for the existence of contact or, probably better, you can provide a default empty contact from the backend.
Your first example updates the html which is different from updating the data scope. Livewire use alpine clone under the wood so i suspect it would just ignore all your x-data changes and set the previous data scope. Afaik, entangle is the safest way to keep livewire and alpine in sync