title: Laravel Livewire with AlpineJS: Entangle a Collection doesn't work
body: <p>I have a Livewire component with the following properties...</p>
  <pre class="lang-php prettyprint-override"><code>class MyClass extends Livewire\Component {
  
      public $dataCollection;  // instance of Illuminate\Database\Eloquent\Collection
      public $dataArray;       // converted to an array of arrays
  
      /* ... blah ... */
  
      function getData() {
          /* ... */
          $this-&gt;dataCollection = $ordersModel-&gt;processMySearch($srch)-&gt;get(); // returns multiple lines of data, producing a Collection
          $this-&gt;dataArray = $this-&gt;dataCollection-&gt;toArray();
      }
  }
  </code></pre>
  <p>Now, my objective is push this data to the Livewire/Blade template and entangle it with an AlpineJS variable.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div x-data=&quot;{
      myCollection: @entangle('dataCollection').defer,
      myArray:      @entangle('dataArray').defer
  }&quot;&gt;
  &lt;table&gt;
  &lt;tbody&gt;
      &lt;template x-for=&quot;myRow in myCollection&quot;&gt;
      &lt;tr&gt;
          &lt;template x-for=&quot;(myData, colName) in myRow&quot;&gt;
              &lt;td :class=&quot;colName&quot; x-text=&quot;myData&quot;&gt;&lt;/td&gt;
          &lt;/template&gt;
      &lt;/tr&gt;
      &lt;/template&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  <p>It doesn't work, because it seems that the collection of models doesn't convert (or map) properly from Livewire/PHP into the Alpine <code>myCollection</code> variable.  When I run a <code>console.log()</code> debug on the variable, it tells me that it's an empty array.</p>
  <p><a href="https://i.stack.imgur.com/5M8Kc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5M8Kc.png" alt="enter image description here" /></a></p>
  <p>However, if I loop the table the <code>myArray</code> variable (rather than the <code>myCollection</code> one):</p>
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tbody&gt;
      &lt;template x-for=&quot;myRow in myArray&quot;&gt;
      &lt;tr&gt;
      &lt;!-- etc --&gt;
  </code></pre>
  <p>Then the HTML table generates on page nicely.</p>
  <p>The reason I would prefer to use the Collection object, is because I may want to update some of the data in the table.  If I am able to update the data in the (<code>@entangle</code>ed) Model objects and have the Models synch back to the Livewire/PHP component, then I won't need to re-generate the models in PHP, potentially saving me some database calls.</p>
  <p>Is it possible to <code>@entangle</code> Alpine variables to PHP Collections in this way?  If so, what am I doing wrong and why isn't it working in the above example?</p>
  <p>x</p>
  <hr />
  <p><em><strong>Disclaimer</strong>
  The above code is a (very) simplified excerpt of a larger project that I'm working on.  It's not a direct copy/paste of the original code and as such may contain minor syntax errors.  Please treat it as pseudo code.</em></p>