Firestoreからリアルタイムにデータを取得して画面に表示したい

Question

前提・実現したいこと

Firestoreからデータを取得して画面に表示しようとしています。
console.logでは取得されたデータが確認できているのですが、
画面上にデータが表示されません。

いろいろ調べましたが原因がわからず、どなたかお知恵をいただけると嬉しいです。

処理の概要

• 変更をリアルタイムで反映したいため.onSnapshot()を使用
• Detail.vueでfirestoreよりデータ（travel_idのリスト）を取得
• v-forでtravel_idのリストを回して1つずつAbout.vueに渡す
• About.vueでは受け取ったtravel_idを使い、別のデータをfirestoreから取得して表示

該当のソースコード

Detail.vue

<template>
  <div>
    //about.vueにtravel_idsを渡して内容を表示
    <about
      v-for="travel_id in travel_ids"
      :key="travel_id"
      :travel_id="travel_id"
    ></about>
    <v-layout justify-center>
      <v-dialog v-model="basic_data_dialog" persistent max-width="600px">
        <template v-slot:activator="{ on }">
          <v-btn v-on="on">add new travel</v-btn>
        </template>
        <inputBasicData @from-child="closeBasicForm"></inputBasicData>
      </v-dialog>
    </v-layout>
  </div>
</template>

<script>
import inputBasicData from "../components/inputBasicData";
import about from "../components/About";

export default {
  components: {
    about,
    inputBasicData,
  },
  props: {},
  data() {
    return {
      travel_ids: null,
      basic_data_dialog: null,
    };
  },
  created() {
    this.getUserData();
  },
  methods: {
    getUserData: function() {
      const db = this.$firebase.firestore();
      const user = this.$firebase.auth().currentUser;
      if (!user) {
        return;
      }
      // ユーザに紐づくtravel_idを取得
      db.collection("users")
        .doc(user.uid)
        .onSnapshot({ includeMetadataChanges: true }, function(doc) {         
          //↓{travel_id: Array(7)}がコンソールに表示される
          console.log("Current data: ", doc.data());

　　　　　　//data()で定義したtravel_idsにデータを格納
          this.travel_ids = doc.data().travel_id;

　　　　　　//↓idのリスト["BPfMy", "pATnx",,,]がコンソールに表示される
          console.log(this.travel_ids);
        });
    },
    closeBasicForm() {
      this.basic_data_dialog = !this.basic_data_dialog;
    },
  },
};
</script>

About.vue

Home.vueから渡されたtravel_idをもとに詳細データを取得
<template>
  <div>
    <div v-for="info in basic_info" :key="info.destination">
      <v-card class="mx-5 my-5" max-width="800">
        <v-img class="white--text align-end" height="200px" :src="image_src">
          <v-card-title>{{ info.destination }}</v-card-title>
        </v-img>
        <v-card-subtitle class="title"
          >{{ info.start_date }} 〜 {{ info.end_date }}</v-card-subtitle
        >
        <v-card-text class="text--primary">
          {{ info.goal }}
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="orange" text>
            <router-link
              v-bind:to="{ name: 'plan', params: { travel_id: travel_id } }"
              >Detail</router-link
            >
          </v-btn>
        </v-card-actions>
      </v-card>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    travel_id: {},
  },
  data() {
    return {
      image_src: require("../assets/stockholm.jpg"),
      basic_info: null,
      hasNoTravels: null,
    };
  },
  created() {
    this.getUserBasicData();
  },
  methods: {
    getUserBasicData: async function() {
      console.log(this.travel_id);
      const db = this.$firebase.firestore();
      let info = [];
      const info_ref = db.collection("basic_info").doc(this.travel_id);
      info_ref.onSnapshot((doc) => {
        info.push(doc.data());
      });
      this.basic_info = info;
    },
  },
};
</script>

main.js

import Vue from "vue";
import App from "./App.vue";
import { firestorePlugin } from "vuefire";
import vuetify from "./plugins/vuetify";
import router from "./router";

/* Import the firebase SDK and extend with firestore */
const firebase = require("firebase/app");
require("firebase/firestore");
require("firebase/auth");

Vue.use(firestorePlugin);
const firebaseConfig = {
    //省略
};

/* Initialize firebase with your configuration */
firebase.initializeApp(firebaseConfig);

/* Bind firebase to your Vue instance */
Vue.prototype.$firebase = firebase;

Vue.config.productionTip = false;

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

###試したこと
About.vueへのデータを渡す箇所で失敗しているのかと思い、
画面に直接travel_idsを表示しようとしましたがそれも表示されませんでした。

補足情報（FW/ツールのバージョンなど）

"core-js": "^3.6.4",
"firebase": "^7.14.3",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuefire": "^2.2.0-alpha.0",
"vuetify": "^2.2.11"