showModal is not defined when sharing State Between Livewire And Alpinejs with #entangle - laravel

Question

Basically I'm using the #entangle to share the state between my Livewire component and my Alpine component.
<div x-data="{ open:#entangle('showModal') }" #keydown.escape="showModal=false">
<button type="button" class="block p-2 btn-light-green" #click="showModal=true">Añadir Mezcla</button>
<!--Overlay-->
<div class="overflow-auto" style="background-color: rgba(0,0,0,0.5)" x-show="showModal" :class="{ 'absolute inset-0 z-10 flex items-center justify-center': showModal }">
<!--Dialog-->
<div class="bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg py-4 text-left px-6"
x-show="showModal"
#click.away="showModal=false"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<!-- Title -->
<div class="flex justify-between items-center mb-3">
<p class="text-xl font-bold">Añadir una mezcla</p>
<div class="cursor-pointer z-50" #click="showModal=false">
<svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
</div>
</div>
<!-- Content -->
<livewire:mix.user.create-mix-form/>
</div>
<!-- /Dialog -->
</div>
<!-- /Overlay -->
</div>
This is my Livewire Component:
<?php
namespace App\Http\Livewire\Mix\User;
use App\Models\Mix;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
use Livewire\WithPagination;
class ShowUserMixes extends Component
{
use WithPagination;
protected $listeners = [
'deletedMix' => 'render',
'addedMix' => 'render'
];
public $showModal = false;
public function closeModal()
{
$this->showModal = false;
}
public function deleteUserMix($mix_id, $user_id)
{
if (Auth::user()->id !== $user_id) {
return false;
}
$mix = Mix::find($mix_id);
$mix->delete();
$this->emitSelf('deletedMix');
}
public function render()
{
return view('livewire.mix.user.show-user-mixes', [
'mixes' => Auth::user()->mixes()->where('active', 1)->paginate(10)
]);
}
}
This is the error I'm getting at the console:
Uncaught ReferenceError: showModal is not defined
at eval (eval at saferEval (alpine.js?df24:1701), :3:36)
at saferEval (alpine.js?df24:112)
at Component.evaluateReturnExpression (alpine.js?df24:1581)
at eval (alpine.js?df24:1557)
at Array.forEach ()
at Component.resolveBoundAttributes (alpine.js?df24:1530)
at Component.initializeElement (alpine.js?df24:1446)
at eval (alpine.js?df24:1430)
at eval (alpine.js?df24:1420)
at walk (alpine.js?df24:84)
I don't know what might me happening here, I'm using the #entangle properties as the Livewire docs do.
https://laravel-livewire.com/docs/2.x/alpine-js#extracting-blade-components

Answer 1

When you #entangle a property in AlpineJS, you're making a reference form your Alpine Property to another property in your Livewire Component.
Your issue is at the top of your modal definition, in your x-data declaration.
If you use x-data="{ open: #entangle('showModal') }", your showModal property will be bound inside alpine with the name open.
You only need to change the name of your definition:
<div
x-data="{ showModal: #entangle('showModal') }"
<!-- Other attributes here -->
>
<!-- Your modal goes here -->
</div>

Answer 2

You are trying to set and evaluate your livewire variable showModal when you should be setting and evaluating the property you set with Alpine which is open.
Try:
<div x-data="{ open:#entangle('showModal') }" #keydown.escape="open=false">
<button type="button" class="block p-2 btn-light-green" #click="open=true">Añadir Mezcla</button>
<!--Overlay-->
<div class="overflow-auto" style="background-color: rgba(0,0,0,0.5)" x-show="open" :class="{ 'absolute inset-0 z-10 flex items-center justify-center': open }">
<!--Dialog-->
<div class="bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg py-4 text-left px-6"
x-show="open"
#click.away="open=false"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<!-- Title -->
<div class="flex justify-between items-center mb-3">
<p class="text-xl font-bold">Añadir una mezcla</p>
<div class="cursor-pointer z-50" #click="open=false">
<svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
</div>
</div>
<!-- Content -->
<livewire:mix.user.create-mix-form/>
</div>
<!-- /Dialog -->
</div>
<!-- /Overlay -->
</div>