【Nuxt.js】非同期データーをコンポーネント内で扱う方法

Nuxt.jsで作るWebサイトをでInfomationを手軽に作るため、heddresscmsであるmicrocmsを利用しようと思いました。

こちらの記事を参考にMicrocmsからのAPIを取得しNuxt内に表示される方法を参考にしました。
https://microcms.io/blog/create-nuxt-microcms-recruit/

まずはTopページに下記のように書きました。

index.vue

<template lang="pug">
省略
    div
      .items
        .item-box(v-for='item in items' :key='item.id')
          .name
            | {{ item.title }}
省略
</template>

<script>
export default {
  data () {
    return {
      items: ''
    }
  },
  async asyncData ({ $axios }) {
    const data = await $axios.$get('https://*******.microcms.io/api/v1/news', {
      headers: { 'X-API-KEY': ''****************************' }
    })
    return {
      items: data.contents
    }
    }
}
</script>

うまく表示されましたので、次にコンポーネント化し使用と思い。
info.veuとしてソースをわけました。

index.vue

<template lang="pug">
  main
    mainvisual
    section
    information

</template>

<script>

import Mainvisual from '~/components/home/Mainvisual.vue'
import Section from '~/components/home/Section01.vue'
import Imformation from '~/components/home/information.vue'

export default {
  components: {
    Mainvisual,
    Section,
    Information
  },
}
</script>

Information.vue

<template lang="pug">
    div
        .items
            .item-box(v-for='item in items' :key='item.id')
                .name
                    | {{ item.title }}

</template>

<script>
export default {
  data () {
    return {
      items: ''
    }
  },
  async asyncData ({ $axios }) {
    const data = await $axios.$get('https://*******.microcms.io/api/v1/news', {
      headers: { 'X-API-KEY': '****************************' }
    })
    return {
      items: data.contents
    }
    }
}

</script>

しかしいざ開いてみると表示されず、エラーも表示されない状況でした。

原因を調べてみますと公式にかいてありました。
コンポーネント内で非同期データを扱うには？

どうやらasyncDataメソッドはページコンポーネントで使えるもので、通常のコンポーネントでは使用できないようです。

しかたないのでmountedに書き換えてみることにします。

index.vue

<template lang="pug">
    div
        .items
            .item-box(v-for='item in items' :key='item.id')
                .name
                    | {{ item.title }}

</template>

<script>
export default {
  data () {
    return {
      items: ''
    }
  },
  mounted() {
    this.asyncData()
  },
  asyncData () {
    await axios.get('https://*******.microcms.io/api/v1/news',{
      headers: { 'X-API-KEY': '****************************' }
    })
    .then(res =>{
      console.log(res)
      this.items= res.data.contents
    })
  }
}
</script>

このように書き直したらうまく表示されました。