[Vuejs]-Iterate through array of objects not working in VueJS

Edit: Try something like this.

Modify article-content component as fallows:

   Vue.component('article-content', {
        template: '<div>
                      <p class="id"> {{ article.content.id }}</p>
                      <p class="type"> {{ article.content.type }} </p>
                      <div v-html="article.content.id"></div>
                   <div>',
      props: {
      article: Object,
    },
    });

And then render your content as fallows:

 <article-content v-for="contentItem in article"
       v-bind:key="contentItem.content.id"
       v-bind:article="contentItem">
    </article-content>