Livewire 3: why does wire:model not update my property until I click submit?

In Livewire 3, wire:model is deferred by default. The value is sent to the server only with the next network request (a button click, a wire:click, a form submit). In Livewire 2 the default was the opposite, with wire:model.defer as the opt-in.

Fix: make it live

<input type="text" wire:model.live="search">

Debounce it so you do not send a request for each key:

<input type="text" wire:model.live.debounce.300ms="search">

Other modifiers

• wire:model.blur updates when the field loses focus.
• wire:model.change updates on the browser change event.
• .lazy from v2 was replaced by .blur/.change; .defer is no longer needed.

Component side

class Posts extends Component
{
    public string $search = '';

    public function updatedSearch(): void
    {
        $this->resetPage();   // with WithPagination
    }

    public function render()
    {
        return view('livewire.posts', [
            'posts' => Post::where('title', 'like', "%{$this->search}%")->paginate(10),
        ]);
    }
}

Pitfalls

• Livewire 3 wire:model on a child element only listens to events from that element; use .deep if you rely on bubbling events.
• Use #[Url] on the property if the search should be in the query string.
• Live updates on large forms are expensive. Keep deferred for most fields and make only the filters live.