title: Nested components in Livewire with AlpineJS and @entangle directive
body: <p>I'm currently developping a project with Livewire and AlpineJS.</p>
  <p>I have to use a div with contenteditable set to &quot;true&quot; to access and modify my data model.</p>
  <p><strong>What I want</strong></p>
  <p>I would like to share the state between Livewire And Alpine using <strong>@entangle</strong>.</p>
  <p><strong>My code</strong></p>
  <p>My code is in two parts.
  The first-part rely on a <a href="https://laravel-livewire.com/docs/2.x/rendering-components#page-components" rel="nofollow noreferrer">full-Page component</a> where I simply register an array of $fruits.
  The second, is a component containing a &quot;form&quot; allowing me to access and modify the data through <strong>@entangle</strong> and a div with contenteditable set to true.</p>
  <pre class="lang-php prettyprint-override"><code>&lt;?php
  
  namespace App\Http\Livewire;
  
  use Livewire\Component;
  
  class ListFruit extends Component
  {
  
      protected $listeners = ['addFruit'];
  
      public array $fruits = [];
  
      public function mount()
      {
          $this-&gt;addFruit();
      }
  
      public function addFruit()
      {
          $this-&gt;fruits[] = $this-&gt;makeBlankFruit();
      }
  
  
  
      public function makeBlankFruit(): array
      {
          return [
              'type' =&gt; '',
              'color' =&gt; ''
          ];
      }
  
        public function render()
      {
          return view('livewire.list-fruit');
      }
  }
  
  </code></pre>
  <p>The <strong>views/livewire/list-fruit.blade.php</strong> file</p>
  <pre class="lang-php prettyprint-override"><code>&lt;div  class=&quot;w-full container mx-auto&quot;&gt;
  
      &lt;h3 class=&quot;text-2xl font-sembibold&quot;&gt;
            Fruits
      &lt;/h3&gt;
  
      &lt;div id=&quot;fruits&quot;&gt;
         @foreach($fruits as $fruitIndex=&gt; $fruit)
  
           &lt;livewire:fruit :fruitIndex=&quot;$fruitIndex&quot; :fruit=&quot;fruit&quot; :wire:key=&quot;$fruitIndex&quot; &gt;
  
         @endforeach
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p><strong>Fruit Component</strong></p>
  <pre><code>&lt;?php
  
  namespace App\Http\Livewire;
  
  use Livewire\Component;
  
  class Fruit extends Component
  {
  
      public array $fruit = [];
  
      public string $fruitIndex;
  
      public function render()
      {
          return view('livewire.fruit');
      }
  }
  
  </code></pre>
  <p><strong>views/livewire/fruit.blade.php</strong> file</p>
  <pre><code>
  
  &lt;div x-data=&quot;{type: @entangle('fruit.type'), color: @entangle('fruit.color')}&quot;
      x-init=&quot;console.log(type)&quot;
  &gt;
      &lt;div&gt;
          &lt;div x-on:blur=&quot;type = $event.target.innerHTML&quot; contenteditable=&quot;true&quot;&gt;{{ $fruit['type'] }}&lt;/div&gt;
          &lt;div x-on:blur=&quot;color = $event.target.innerHTML&quot; contenteditable=&quot;true&quot;&gt;{{ $fruit['color'] }}&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          $type @ Livewire: {{ $fruit['type'] }}
          $color @ Livewire: {{ $fruit['color']  }}
      &lt;/div&gt;
      &lt;div&gt;
          type @ AlpineJS: &lt;span x-text=&quot;type&quot;&gt;&lt;/span&gt;
          color @ AlpineJS: &lt;span x-text=&quot;color&quot;&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>If I had only one array with some properties in my main component, let's say :</p>
  <pre class="lang-php prettyprint-override"><code> public array $fruit = [
    'type' =&gt; '',
    'color' =&gt; '',
   ];
  </code></pre>
  <p>I would be able to access them with my fruit.blade.php</p>
  <p>I also tried to do something like this.</p>
  <pre><code>{type: @entangle('fruits.'. $fruitIndex.'.color'), color: @entangle('fruits.'. $fruitIndex.'.type')}
  </code></pre>
  <p><strong>What I obtained</strong></p>
  <p>In my AlpineJs component I read an [object Object] proxy and when modifying my fruit.color or fruit.type property the livewire part isn't updated.</p>
  <p>I don't know why.
  In my final attempt, I tried to separate my fruits into multiple sub-components allowing me to work on a single array.</p>
  <p>I'm a looking at a dead end, so thank you in advance for your help.
  Tanuki</p>