title: showModal is not defined when sharing State Between Livewire And Alpinejs with @entangle
body: <p>Basically I'm using the @entangle to share the state between my Livewire component and my Alpine component.</p>
  <pre><code>&lt;div x-data=&quot;{ open:@entangle('showModal') }&quot; @keydown.escape=&quot;showModal=false&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;block p-2 btn-light-green&quot; @click=&quot;showModal=true&quot;&gt;Añadir Mezcla&lt;/button&gt;
  
              &lt;!--Overlay--&gt;
              &lt;div class=&quot;overflow-auto&quot; style=&quot;background-color: rgba(0,0,0,0.5)&quot; x-show=&quot;showModal&quot; :class=&quot;{ 'absolute inset-0 z-10 flex items-center justify-center': showModal }&quot;&gt;
                  &lt;!--Dialog--&gt;
                  &lt;div class=&quot;bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg py-4 text-left px-6&quot;
                       x-show=&quot;showModal&quot;
                       @click.away=&quot;showModal=false&quot;
                       x-transition:enter=&quot;ease-out duration-300&quot;
                       x-transition:enter-start=&quot;opacity-0&quot;
                       x-transition:enter-end=&quot;opacity-100&quot;
                       x-transition:leave=&quot;ease-in duration-300&quot;
                       x-transition:leave-start=&quot;opacity-100&quot;
                       x-transition:leave-end=&quot;opacity-0&quot;&gt;
  
                      &lt;!-- Title --&gt;
                      &lt;div class=&quot;flex justify-between items-center mb-3&quot;&gt;
                          &lt;p class=&quot;text-xl font-bold&quot;&gt;Añadir una mezcla&lt;/p&gt;
                          &lt;div class=&quot;cursor-pointer z-50&quot; @click=&quot;showModal=false&quot;&gt;
                              &lt;svg class=&quot;fill-current text-black&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 18 18&quot;&gt;
                                  &lt;path d=&quot;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&quot;&gt;&lt;/path&gt;
                              &lt;/svg&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;!-- Content --&gt;
                      &lt;livewire:mix.user.create-mix-form/&gt;
                  &lt;/div&gt;
                  &lt;!-- /Dialog --&gt;
              &lt;/div&gt;
              &lt;!-- /Overlay --&gt;
          &lt;/div&gt;
  </code></pre>
  <p>This is my Livewire Component:</p>
  <pre><code>&lt;?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' =&gt; 'render',
          'addedMix' =&gt; 'render'
      ];
  
      public $showModal = false;
  
      public function closeModal()
      {
          $this-&gt;showModal = false;
      }
  
      public function deleteUserMix($mix_id, $user_id)
      {
          if (Auth::user()-&gt;id !== $user_id) {
              return false;
          }
  
          $mix = Mix::find($mix_id);
          $mix-&gt;delete();
          $this-&gt;emitSelf('deletedMix');
      }
  
      public function render()
      {
          return view('livewire.mix.user.show-user-mixes', [
              'mixes' =&gt; Auth::user()-&gt;mixes()-&gt;where('active', 1)-&gt;paginate(10)
          ]);
      }
  }
  </code></pre>
  <p>This is the error I'm getting at the console:</p>
  <blockquote>
  <p>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)</p>
  </blockquote>
  <p>I don't know what might me happening here, I'm using the @entangle properties as the Livewire docs do.
  <a href="https://laravel-livewire.com/docs/2.x/alpine-js#extracting-blade-components" rel="nofollow noreferrer">https://laravel-livewire.com/docs/2.x/alpine-js#extracting-blade-components</a></p>