Livewire wire:click not working inside Alpine.js x-data directive

I'm encountering an issue where Livewire's wire:click method doesn't work inside an Alpine.js x-data directive. Here's a breakdown of my setup:

Inside routes/web.php,

Route::get('/product/{slug}', [ProductController::class, 'show'])->name('product.show');

Inside app/Http/Controllers/ProductController.php,

public function show($slug)
{
    // Fetching the product and related products data
    // Pass the product and related products to the view
    return view('pages.products.show', compact('product', 'products'));
}

Inside resources/views/pages/products/show.blade.php,

	@extends('layouts.default')
   @section('title', $product->model)
   @section('content')
       @livewire('button', ['product' => $product])
       <div class="max-w-screen-xl mx-auto p-4">
           @livewire('button', ['product' => $product])
           <div x-data="{ mainImage: '{{ $product->images->first() ? asset('img/products/' . $product->slug . '/' . $product->images->first()->filename) : asset('img/common/img-unavailable.jpg') }}' }">
               @livewire('button', ['product' => $product])
               <div class="container mx-auto px-4 py-8">
                   @livewire('button', ['product' => $product])
               </div>
           </div>
           @livewire('button', ['product' => $product])
           <x-products.grid :products="$products" />
       </div>
   @endsection

Inside resources/views/livewire/button.blade.php,

<div>
    <button
        class="bg-indigo-600 flex gap-2 items-center text-white px-6 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" type="button" wire:click="clicked">
        Add to Cart
    </button>
</div>

Inside app/Livewire/Button.php,

<?php

namespace App\Livewire;

use Barryvdh\Debugbar\Facades\Debugbar;
use Livewire\Component;

class Button extends Component
{
    public $product;

    public function mount($product)
    {
        $this->product = $product;
        Debugbar::info("Product mounted:", $this->product);
    }

    public function render()
    {
        return view('livewire.button');
    }

    public function clicked()
    {
        Debugbar::info("clicked");
        Debugbar::info("Product in cart:", $this->product);
        // $this->emit('cartUpdated');
    }
}

All Livewire buttons in the show.blade.php view work correctly except for those inside the Alpine.js x-data directive. Specifically, the buttons inside this block:

<div x-data="{ mainImage: '{{ $product->images->first() ? asset('img/products/' . $product->slug . '/' . $product->images->first()->filename) : asset('img/common/img-unavailable.jpg') }}' }">
    @livewire('button', ['product' => $product])
    <div class="container mx-auto px-4 py-8">
        @livewire('button', ['product' => $product])
    </div>
</div>

The wire:click method on these buttons does not trigger the clicked method in the Livewire component. However, the mount method is called, and the product details are logged in Debugbar. The buttons outside this x-data block work as expected, and clicking them results in an AJAX call and logs the "clicked" message.

What I've Tried:

• Verified that the mount method is called and the product data is correctly passed to the Livewire component.
• Confirmed that the wire:click method works outside the x-data block.
• Checked for any JavaScript errors in the console, but none were found.