Livewire 3.6.10 with Laravel 11 – wire:click, wire:submit, and wire:model not working

I'm using Laravel 11 with Livewire 3.6.10 and have Alpine.js properly configured. I'm facing an issue where Livewire actions such as wire:click, wire:submit, and wire:model are not working as expected — they don’t trigger any methods or update properties.

Here is the code

Blade Layout (resources/views/layouts/app.blade.php)

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <title>{{ config('app.name', 'fff') }}</title>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    @vite(['resources/css/app.css'])
</head>
<body x-data="{ 'isProfileInfoModal': false }">
    <main>
        <div class="p-4 mx-auto max-w-(--breakpoint-2xl) md:p-6">
            <livewire:test-form />
            {{ $slot }}
        </div>
    </main>
    @vite(['resources/js/app.js', 'resources/js/index.js'])
</body>
</html>

Livewire Component: TestForm.php

namespace App\Livewire;

use Livewire\Component;

class TestForm extends Component
{
    public $name = '';
    public $email = '';
    public $testMessage = "This is test";

    public function save()
    {
        dd('Working!', $this->name, $this->email);
    }

    public function render()
    {
        return view('livewire.test-form');
    }
}

Blade View: resources/views/livewire/test-form.blade.php

<div>
    {{ $testMessage }}

    <form wire:submit.prevent="save">
        <input type="text" wire:model.live="name">
        <input type="email" wire:model="email">
        <button type="submit">Submit</button>
    </form>

    <div>Values: {{ $name }} - {{ $email }}</div>
</div>

The Issue:

wire:model, wire:submit.prevent, and wire:click do not trigger anything.
wire:model values don’t bind or update.
I've added @livewireStyles and @livewireScripts, but the issue persists.

What Works:

Declaring a Livewire component and rendering it is fine.

Static properties like $testMessage are displayed properly.

Data is fetched from database and could be displayed on the view or blade.

What I Need Help With:

What could be preventing Livewire’s interactivity?

Is there something missing in the setup for Laravel 11 + Livewire 3.x?

Any common pitfalls with Vite, Alpine.js, or the layout structure?

Application:

Laravel 11 & livewire 3.6.10

I have tried running the application with and without following script tags.

@livewireStyles and @livewireScripts

But it was not working in both cases.

I have studied a lot over the internet and forums but could not solve the issue.

Solution

I have finally managed to solve the problem.

The problem was in the alpineJS, I had initialized it in the index.js file as follow:

app.js

import Alpine from "alpinejs";
import persist from "@alpinejs/persist";
import './bootstrap'; 

Alpine.plugin(persist);
window.Alpine = Alpine;
Alpine.start();

and then imported that file via vite as follow:

@vite(['resources/js/app.js', 'resources/js/index.js'])

Since the project is in [Laravel + Livewire + Vite], therefor Alpine is already initialized and does not need to be initialized again. in order to avoid the problem, the app.js should have following content:

app.js


import Alpine from 'alpinejs'
import persist from '@alpinejs/persist'
import './bootstrap'; 

// Only register Alpine once (before Livewire boots it)
window.Alpine = Alpine
Alpine.plugin(persist)

It worked,and it turned out the Livewire + Vite was starting the Alpine dynamically, and we were restarting Alpine in the app.js file as Alpine.start(); which was causing the conflicts.