Alpine + Vue + Livewire

alpine-vue.js

document.addEventListener('alpine:init', () => {
    Alpine.setReactivityEngine({
        reactive: Vue.reactive,
        effect: Vue.effect,
        release: Vue.stop,
        raw: Vue.toRaw
    })
})

component.php

<?php

use Livewire\Volt\Component;

new class extends Component {
    public string $name = 'Mr Foo';
  
    public function save(): void
    {
        // Handle save...
    }
}
?>

<div id="app" wire:ignore>
    <input type="text" v-model="$data.name" />
    
    <h1 v-text="$data.name"></h1>
  
    <button @click="$data.save()">Save</button>
</div>

@script
<script>
    Vue.createApp({
        data() { return $wire }
    }).mount("#app");
</script>
@endscript