Dirty State Tracking in Livewire v4

<form wire:submit="save">
    <input wire:model="name" placeholder="Name">
    <input wire:model="email" placeholder="Email">
    
    <!-- Show message when ANY field is dirty -->
    <div wire:dirty class="text-yellow-600 text-sm">
        You have unsaved changes
    </div>
    
    <!-- Change button style when dirty -->
    <button 
        type="submit"
        wire:dirty.class="bg-yellow-500 animate-pulse"
        wire:dirty.class.remove="bg-gray-300"
    >
        Save Changes
    </button>
</form>

<div>
    <label>Username</label>
    <input wire:model="username">
    <span wire:dirty.target="username" class="text-orange-500">
        Username modified
    </span>
</div>

<div>
    <label>Bio</label>
    <textarea wire:model="bio"></textarea>
    <span wire:dirty.target="bio" class="text-orange-500">
        Bio modified
    </span>
</div>

<div 
    x-data="{ dirty: false }"
    x-on:livewire-dirty.window="dirty = true"
    x-on:beforeunload.window="if(dirty) return 'You have unsaved changes'"
>
    <form wire:submit="save">
        <input wire:model="title" x-on:input="dirty = true">
        <button x-on:click="dirty = false">Save</button>
    </form>
</div>