概要

Hacker News の API を叩いて記事情報を 10 件、取得。Nuxt.js + JavaScript で Vue.js の v-for を使用し、記事一覧を表示。という、アプリケーションをつくっています。
詰まっていることはデータは取れているが、v-for で list レンダリングしようとすると、id にアクセスできず、エラーが出て、記事が表示できません。

取得できている情報

v-for で要素を一つずつ表示した結果です。データは問題なく取れています。

{ "by": "pg", "descendants": 15, "id": 1, "kids": [ 15, 234509, 487171, 454426, 454424, 454410, 82729 ], "score": 57, "time": 1160418111, "title": "Y Combinator", "type": "story", "url": "http://ycombinator.com" }

{ "by": "phyllis", "descendants": 0, "id": 2, "kids": [ 454411 ], "score": 16, "time": 1160418628, "title": "A Student's Guide to Startups", "type": "story", "url": "http://www.paulgraham.com/mit.html" }

{ "by": "phyllis", "descendants": 0, "id": 3, "kids": [ 454412, 531602 ], "score": 7, "time": 1160419233, "title": "Woz Interview: the early days of Apple", "type": "story", "url": "http://www.foundersatwork.com/stevewozniak.html" }

{ "by": "onebeerdave", "descendants": 0, "id": 4, "kids": [ 454413 ], "score": 5, "time": 1160419662, "title": "NYC Developer Dilemma", "type": "story", "url": "http://avc.blogs.com/a_vc/2006/10/the_nyc_develop.html" }

{ "by": "perler", "descendants": 0, "id": 5, "kids": [ 454414 ], "score": 7, "time": 1160419864, "title": "Google, YouTube acquisition announcement could come tonight", "type": "story", "url": "http://www.techcrunch.com/2006/10/09/google-youtube-sign-more-separate-deals/" }

{ "by": "perler", "descendants": 0, "id": 6, "kids": [ 454415 ], "score": 4, "time": 1160420200, "title": "Business Intelligence the Inkling Way: cool prediction markets software", "type": "story", "url": "http://360techblog.com/2006/10/02/business-intelligence-the-inkling-way/" }

{ "by": "phyllis", "descendants": 0, "id": 7, "kids": [ 454416 ], "score": 5, "time": 1160420455, "title": "Sevin Rosen Unfunds - why?", "type": "story", "url": "http://featured.gigaom.com/2006/10/09/sevin-rosen-unfunds-why/" }

{ "by": "frobnicate", "descendants": 0, "id": 8, "kids": [ 454417 ], "score": 10, "time": 1160421459, "title": "LikeBetter featured by BBC", "type": "story", "url": "http://news.bbc.co.uk/2/hi/programmes/click_online/5412216.stm" }

{ "by": "askjigga", "descendants": 0, "id": 9, "kids": [ 454418 ], "score": 4, "time": 1160421542, "title": "weekendr: social network for the weekend", "type": "story", "url": "http://www.weekendr.com/" }

{ "by": "frobnicate", "descendants": 0, "id": 10, "kids": [ 454419 ], "score": 3, "time": 1160421674, "title": "PhotoShow: Broadcast Photos to Cable TV", "type": "story", "url": "http://www.techcrunch.com/2006/10/09/broadcast-photos-to-cable-tv/" }

エラーが発生しているコード

<template>
  <div>
    <h1 class="website-title">Hacker News</h1>
    <div v-for="(article, index) in articles" :key="index">
      <p>{{ article.id }}</p>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const topStoryIds = await $axios.$get(
      'https://hacker-news.firebaseio.com/v0/topstories.json'
    )

    const topTenIds = topStoryIds.filter(
      (topStoryId) => topStoryIds.indexOf(topStoryId) <= 10
    )

    const articles = []
    let articleId
    for (articleId in topTenIds) {
      const itemUrl = `https://hacker-news.firebaseio.com/v0/item/${articleId}.json?print=pretty`
      const item = await $axios.$get(itemUrl)
      articles.push(item)
    }

    return {
      articles,
    }
  },
}
</script>

<style scoped>
.website-title {
  margin: 16px 16px;
  font-size: calc(1rem + 1vw);
  font-weight: bold;
}
</style>

よろしくお願いいたします。