microCMSとNuxt.jsでaxiosを使用したAPI取得時にコンポーネント化すると出力できない

Question

Nuxtにinfomationの情報をつけたいと思いヘッドレスCMSのmicroCMSを使ってみることにしました。
環境: MacOS(catalina)
NODE: v12.14.0
yarn: 1.21.1
vue: @vue/cli 4.1.2
nuxt: @nuxt/cli v2.11.0
mode: 'universal'(SSR)

axiosはインストール済みnuxt.configに追加。

  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    // proxyHeaders: false
  },

下記の記事をもとにコードをかいていきました。
Nuxtで最近話題のMicroCMSを使用してFirebaseで公開する

まずはTopページにコードを記入、ここまでは無事出力できました。

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

</template>

<script>

import Mainvisual from '~/components/home/Mainvisual.vue'
import Section01 from '~/components/home/Section01.vue'
import Section02 from '~/components/home/Section02.vue'
import Section03 from '~/components/home/Section03.vue'

export default {
  components: {
    Mainvisual,
    Section01,
    Section02,
    Section03
  },
  data () {
    return {
      items: ''
    }
  },
  async asyncData ({ $axios }) {
    const data = await $axios.$get('------------------------------------', {
      headers: { 'X-API-KEY': '-----------------------------------' }
    })
    return {
      items: data.contents
    }
	}
}

</script>

section4としてコンポーネント化しました。

<template lang="pug">
  main
    mainvisual
    section01
    section02
    section03
    section04

</template>

<script>

import Mainvisual from '~/components/home/Mainvisual.vue'
import Section01 from '~/components/home/Section01.vue'
import Section02 from '~/components/home/Section02.vue'
import Section03 from '~/components/home/Section03.vue'
import Section04 from '~/components/home/Section04.vue'

export default {
  components: {
    Mainvisual,
    Section01,
    Section02,
    Section03,
    Section04
  }
}

</script>

そしてデータが出力されたかと思いきや何もでてきません。

コンポーネント化するとどうして何も出力されないのでしょうか？
なにか別の設定があるのでしょうか？

※追記Section04.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>

解決

<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>

Answer 1

Section04.vue の中身がわからないので、想像ですが、 Section04 でも asyncData を使用していませんか？
asyncData はページコンポーネントで使えるもので、通常のコンポーネントでは使用できません。

コンポーネント内で非同期データを扱うには？

その場合は mounted に書くなどすればいいと思います。
違った場合は Section04 の内容を見せてもらえると……

Comments

[ttkun]

Section04.vueのコンポーネント内でasyncDataを使用しています。
そうだったんですね。使えなかったんですね。

[aaharu]

そうです。コメントしていますが、 `mounted` に書き換えるなどすると良いと思います。

[ttkun]

わからないなりにググってみましたが、こちらの記事がちかいのかなと思いました。
https://www.to-r.net/media/nuxt-microcms/

Answer 2

下記のようにmountedに書き直したらうまくいきました。

<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>