How to update page title via wire:bind input field

#1

I want to set the page title as I enter text into an input box

Steps to Reproduce:

Are you using the latest version of Livewire: yes

 public function render()
    {
        return view('livewire.my-component')
            ->extends('layouts.app', ['pageTitle' => $this->title ]);
    }

component

<input type="text" wire:model="title">

layouts/app.blade.php file

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>@yield('pageTitle') &hyphen; {{config('app.name')}}</title>
    @livewireStyles
</head>
<body>
<div>
    <main class="container py-4" style="min-height: 100vh">
        <div class="bg-light p-3 shadow">
            @yield('content')
        </div>
    </main>
</div>
@livewireScripts
</body>
</html>
#2

If you are using Livewire v2 you could do something like this:

<div 
    x-data="{ title: @entangle('title') }"
    x-init="$watch('title', newtitle => document.title = newtitle)"
>
    <input wire:model="title" type="text">
</div>