VueCliでFirestoreにある値を表示したい。

vuecliでWebサービスを作ってます。Firestoreに登録されているデータを以下のようにして取得しようとしましたが、表示されませんでした。
エラーは特に出ませんでした。
参考

main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'

import { firestorePlugin } from 'vuefire'
import firebase from 'firebase' 
import 'firebase/firestore'

Vue.use(firestorePlugin)
Vue.use(Buefy)
var firebaseConfig = {
  apiKey: 
  authDomain: 
  databaseURL: 
  projectId: 
  storageBucket: 
  messagingSenderId: 
  appId: 
  measurementId: 
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

export const db = firebase.firestore()
export const auth = firebase.auth()

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Home.vue

<template>
  <div class="home">
   <b-message>
  　<li v-for="post in posts" :key="post.id">
    
    <div class="top_title">
       <h2>{{ post.title }}</h2>
    </div>
    <div class="top_content">
      <p>{{ post.content }}</p>
     </div>
    <div class="top_createAt">
      <p>{{ post.createdAt }}</p>
    </div>
    </li>
    </b-message>
    
  </div>

</template>

<script>
import { db } from '@/main'

export default {
  name: 'Home',
  data() {
    return {
      posts: []
    }
  },
   firestore() {
    return {
      posts: db.collection('posts')
    }
  }
}
</script>

vue/cli-service　4.4.0
firebase 7.14.6

gentaro

2020/06/04 13:13

一応読んでおいた方が良いんじゃないでしょうか。 https://qiita.com/hoshymo/items/e9c14ed157200b36eaa5#firestore 基本的にはapikeyなどと名の付くものは安易に晒さない癖を付けておいた方が良いです。あとVue-cliのcilはCommand Line Interfaceの略で、要するにコマンドライン用のツールであるという事から来ている名称だと思うんで、なんかタイトルの表現に違和感があります。 https://cli.vuejs.org/guide/#cli > The CLI (@vue/cli) is a globally installed npm package and provides the vue command in your terminal.