Livewire v4 with Alpine.js Integration

<div x-data="{ loading: false }">
    <!-- Call Livewire methods -->
    <button x-on:click="loading = true; $wire.save().then(() => loading = false)">
        <span x-show="!loading">Save</span>
        <span x-show="loading">Saving...</span>
    </button>
    
    <!-- Access Livewire properties -->
    <span x-text="$wire.username"></span>
    <span x-text="$wire.user.name"></span>
    
    <!-- Set properties -->
    <button x-on:click="$wire.set('total', $wire.total + 1)">Increment</button>
</div>

<div x-data="{ 
    open: $wire.entangle('showModal'),
    search: $wire.entangle('searchQuery').live
}">
    <!-- Alpine changes sync to Livewire -->
    <button x-on:click="open = !open">Toggle Modal</button>
    
    <!-- .live modifier for instant sync -->
    <input x-model="search" placeholder="Search...">
    
    <div x-show="open" x-transition>
        Modal content here
    </div>
</div>

<div x-data>
    <!-- Dispatch to Livewire from Alpine -->
    <button x-on:click="$wire.dispatch('item-selected', { id: 5 })">
        Select Item
    </button>
    
    <!-- Listen to Livewire events in Alpine -->
    <div x-on:item-saved.window="alert('Saved!')"></div>
</div>