Using Blaze with Laravel Folio page + Livewire Volt embedded in the page causing corrupt component payload exception on interaction with Volt's props / method #187

{{-- pages/test.blade.php --}}
@props(['title' => 'Test'])
<?php
use Illuminate\Http\Request;
use Illuminate\View\View;
use Livewire\Attributes\On;
use Livewire\Volt\Component;

use function Laravel\Folio\middleware;
use function Laravel\Folio\name;
use function Laravel\Folio\render;

// Volt
new class extends Component
{
    public $count = 0;

    #[On('increment')]
    public function increment(): void
    {
        $this->count++;
    }

    #[On('decrement')]
    public function decrement(): void
    {
        if ($this->count <= 0) {
            return;
        }
        $this->count--;
    }
};

// Folio
render(function (Request $request, View $view): View {
    $message = __('Hello from Folio');

    return $view->with(compact('message'));
});

name('test');
middleware([]);
?>
<x-layouts::root :$title>
    <div x-data="testData">
        @volt('test')
            <div>
                <div class="flex items-center gap-2">
                    <button x-on:click.prevent="$wire.decrement">-</button>
                    <h1>{{ $count }}</h1>
                    <button x-on:click.prevent="$wire.increment">+</button>
                </div>
            </div>
        @endvolt
        <div>
            <template x-if="message">
                <div>Hello, <span x-text="message"></span></div>
            </template>
            <button x-on:click.prevent="callByAxios()" x-bind:disabled="processingAxios">Call Api using
                Axios</button>
            <button x-on:click.prevent="callByFetch()" x-bind:disabled="processingFetch">Call Api
                using
                Fetch</button>
        </div>
        <div>{{ $message }}</div>
        @push('scripts')
            <!-- Test Page -->
            <script defer type="text/javascript">
                document.addEventListener("alpine:init", () => {
                    Alpine.data("testData", () => ({
                        message: '',
                        processingAxios: false,
                        processingFetch: false,
                        async callByAxios() {
                            this.processingAxios = true;
                            const response = await api.get('api/test');
                            setTimeout(() => {
                                this.processingAxios = false;
                                this.message = response?.data.message + '(Axios)';
                            }, 2000);
                        },
                        async callByFetch() {
                            this.processingFetch = true;
                            const response = await $fetch.get('/api/test');
                            setTimeout(() => {
                                this.processingFetch = false;
                                this.message = response?.message + '(Fetch)';
                            }, 2000);
                        }
                    }))
                });
            </script>
        @endpush
    </div>
</x-layouts::root>