title: Vue displaying only last array item
body: <p>I've a Vue component that I iterate over an array as follows: </p>
  
  <pre><code>@if($categories!=null)
      @foreach($categories as $category)
         &lt;accordian&gt;&lt;/accordian&gt;
      @endforeach
  @endif
  </code></pre>
  
  <p>The <code>$categories</code> array has 3 objects. </p>
  
  <pre><code> &lt;script id="accordian-body" type="x-template"&gt;
          &lt;h4 v-on:click="toggleOpen()"&gt;{{$category-&gt;name}}&lt;/h4&gt;
   &lt;/script&gt;
  </code></pre>
  
  <p>When I run this, I'm always get the last array object in the accordian. The count is correct (3 in this case), but the data is always the same. Why is it so?</p>
  
  <blockquote>
    <p>Item3 <br>Item3 <br>Item3</p>
  </blockquote>