我以异步方式从 firestore 加载数据。我可以在日志中显示数据，但 vue 仅显示数据加载前的初始值。

我尝试使用 beforeMount() 和单击按钮来调用加载方法。

我知道我遗漏了一些基本的东西 - 请帮忙找到它。

<template>
  <div class="pt-3">
    <v-row class="d-flex justify-center">
      <v-col cols=4>
        <v-text-field
          label="Nyt land"
          outlined v-model="newItem"
          @keyup.enter="addItem"/>
      </v-col>
      <v-col cols=4>
        <v-text-field
          label="Region"
          outlined v-model="newRegion"
          @keyup.enter="addItem"/>
      </v-col>
    </v-row>
    <v-row class="d-flex justify-center">
        <v-col cols=6>
          <v-btn color="primary" @click="addItem">Tilføj land</v-btn>
      </v-col>
    </v-row>
    
    <v-row class="d-flex justify-center">
        <v-col cols=6>
          <v-btn @click="getGeoHierarchy('Geographies',0,0,[])">Fetch Geographies</v-btn>
      </v-col>
    </v-row>
    <v-row>
        {{vGeoData}}
        <v-col>
            <v-card v-for="(geography,id) in vGeoData" :key="id">
                <v-card-title>{{geography[0].name | capitalize }} </v-card-title>
                <v-card-text>  tests</v-card-text>
            </v-card>
        </v-col>
    </v-row>
  </div>
</template>


<script>
import { db } from '../firebase/db'
export default {
    async created(){
        
    },
    beforeMount(){
        this.getGeoHierarchy('Geographies',0,0,[]);
    },
    data() {
        return {
            Geographies:[],
            newItem: "",
            newRegion:"",
            vFirst:true,
            vTopLevel:0,
            vGeoData: [''],
            vToplevelData: [],


        }
    },
    filters: {
        capitalize: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    },
    methods:{
        async addItem() {
            if(this.newItem && this.newRegion) {
                var docData = {
                    name: this.newItem,
                    regions : {
                        name: this.newRegion
                    }
                };
                await db.collection("Geographies").add(docData);
                this.newItem ="";
                this.newRegion = "";
            }
        },
        deleteItem(id){
            db.collection("Geographies").doc(id).delete();
        },
        async getGeoHierarchy(vPath,vStep,vCounter,vGeographies){
        
            console.log(vPath)
            const vTempGeo = [];
            await db.collection(vPath)
                .get()
                .then(function(querySnapshot) {
                    querySnapshot.forEach(function(doc) {
                        // doc.data() is never undefined for query doc snapshots
                        const vCollections = doc.data().collections;
                        vTempGeo.push({
                            name: doc.data().name,
                            id: doc.id,
                            collection: vCollections,
                            path: vPath + "/" + doc.id,
                            level: vStep,
                        })
                        return vTempGeo
                    });
                });
                
            //debugger;
            console.table("vGeographies:",vGeographies);
            for(let i=0; i<vTempGeo.length;i++){
                vGeographies.splice(vCounter+i,0,vTempGeo[i]);
                // debugger
            }
            const lGeographies = vGeographies.length;
            for (let i=vStep; i<lGeographies;i++){
                const vCurrent = vGeographies[i];
                //debugger
                if(Array.isArray(vCurrent.collection)){
                    
                    for(let j=0; j < vCurrent.collection.length; j++){
                        await this.getGeoHierarchy(vCurrent.path+"/"+vCurrent.collection[j],vStep+i+j+1,vCounter+1,vGeographies);
                    }
                }
            }
            console.log("this.Geographies",this.Geographies);
            console.table("vGeographies:",vGeographies);
            // debugger
            this.Geographies = vGeographies;
            this.populateGeoData(0);
            return this.Geographies
            
        },
        populateGeoData(vTopLevel) {
            console.log('--populateGeodata','start')
            console.table("this.Geographies:",this.Geographies);
            let vTempArr = [];
            let vTopLevelData = [];
            let vTempGeo = [];
            
            let vFirst = true;
            let vTopLevelCounter = 0;

            
            for(const geography of this.Geographies){
                console.log("geography:", geography)
                const last = (this.Geographies.length-1 == this.Geographies.indexOf(geography))
                // debugger
                if(!vFirst){
                    if(geography.level==vTopLevel){
                        vTempGeo[0] = vTopLevelData
                        vTempGeo[1] = vTempArr;
                        this.vGeoData[vTopLevelCounter] = vTempGeo;
                        vTempGeo = [];
                        vTopLevelData = geography;
                        vTempArr = [];
                        vTopLevelCounter++;
                    }
                    else {
                        vTempArr.push(geography);
                    }
                }
                else {
                    if(geography.level == vTopLevel){
                        vTopLevelData = geography;
                        vFirst = false
                    }
                    else{
                        console.log("populateGeoData", "First is not toplevel")
                        vTempArr.push(geography)
                    }
                }
                if(last){
                    if(geography.level == vTopLevel){
                        vTempGeo[0] = vTopLevelData
                        vTempGeo[1] = vTempArr;
                        this.vGeoData[vTopLevelCounter] = vTempGeo;
                    }
                    else {
                        vTempArr.push(geography)
                        this.vGeoData[vTopLevelCounter] = vTempGeo;
                    }
                }
               
            }
           
            console.table("vGeoData:",this.vGeoData)
            console.log('--populateGeodata','end')
            return this.vGeoData;
        }
    },
    firestore: {
        Geographies: db.collection("Geographies")
    },
    mounted(){
        
    },
    watch:{
    }
}
</script>
<style lang="stylus">
    .grape {

    }
</style>

谢谢