title: Iterate through array of objects not working in VueJS
body: <p>I am trying to loop through a nested array of objects in VueJS. I am using a <code>&lt;script type="x-template" id="article-content"&gt; &lt;/script&gt;</code> to render my </p>
  
  <p>I have tried looping through the component attaching a <code>v-for</code> onto it but still nothing gives me the data back. This approach is working on other components but doesn't appear to be working on this specific field. </p>
  
  <p><strong>Component template</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script type="text/x-template" id="article-content"&gt;
      &lt;article class="content__article"
          v-for="contentItem in article.content"&gt;
  
        &lt;!-- THIS DOESN'T RENDER CONTENT --&gt;
  
         &lt;p class="id"&gt; {{ contentItem.id }}&lt;/p&gt;
         &lt;p class="type"&gt; {{ contentItem.type }} &lt;/p&gt;
         &lt;div v-html="contentItem.content"&gt;&lt;/div&gt;
      &lt;/article&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>XHR call will populate article property</strong></p>
  
  <pre><code>const article = new Vue({
      el: "#article-content",
      data: {
         article: { 
          'id': '',
          'publishDate': '', 
          'content': [], // array of content items
         }
      }
  });
  
  Vue.component('article-content', {
      template: '#article-content',
      props: ['article'],
  });
  </code></pre>
  
  <p><strong>Article content component for rendering</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;article-content
     v-bind:key="article.id"
     v-bind:article="article"&gt;
  &lt;/article-content&gt;
  </code></pre>