【Nuxt.js】computedで取得したfirestoreのデータをv-forで表示したい

Question

Nuxt.jsでwebアプリを構築しています。

firestoreのデータをNuxtプロジェクトのcomputedで取得し、画面に表示したいのですが
現状何も表示されません。
特にエラーも表示されません。

▼pages/index.js

<template>
  <div id="Content">
    <div v-for="item in items" :key="item.id">
      <Item :item="item" />
    </div>
  </div>
</template>

<script>
import firebase from '~/plugins/firebase'
import Item from '~/components/Item.vue'

export default {
  components: {
    Item
  },
  computed: {
    items () {
      const db = firebase.firestore()
      const itemArray = []
      db.collection('items').get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          itemArray.push(doc.data())
        })
        console.log(itemArray)  //consoleにはforestoreから取得した値が表示されている
        return itemArray
      })
    }
  }
}
</script>

↑computedの最後で、firestoreから取得した配列をreturnしているのですが、どうもここに値が入っていないようです。（その直前のconsoleではきちんと値が出力される）

▼components/Item.vue

<template>
  <div>
    <p>{{ item.image }}</p>
    <p>{{ item.tag }}</p>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: null
    }
  }
}
</script>

何が間違っているのか分からないため、ご教示いただけますと幸いです。

Answer 1

やろうとしていた事は非同期通信になり、computedは非同期通信はサポートされていないんですね！
createdで取得するとうまく行きました！ありがとうございます！

Answer 2

computedの中での非同期通信はサポートされていません

computedである必要性が無さそうなので、createdとdataを活用すれば実装ができそうです

data() {
  return { items: [] }
},
created() {
  const db = firebase.firestore()
  db.collection('items').get().then((querySnapshot) => {
    this.items = querySnapshot.map(doc => doc.data())
  })
}