【JavaScript(Vue.js)】PromiseResultの中身を変数として保存したい

Question

課題

現在console.logの結果がPromissで返ってきてしまっている。
こちらを変数に保存できるように設定したい

     const self = this;
        this.db = firebase.firestore()
        this.db.collection("posts")
        .where("word", "==", text)
        .orderBy("createdAt", "asc")
        .get()
        .then((query) => {
          var buff = [];
          query.forEach((doc) => {
            var data = doc.data();
            buff.push([doc.id, data]);
          });
          var sentence1 = buff[0][1].sentence
          var sentence2 = buff[1][1].sentence
          var sentenceAll= []
          sentenceAll.push(sentence1)
          sentenceAll.push(sentence2)
          
          self.sentenceArray = sentenceAll
          console.log("test1",self.sentenceArray);
          
        })
        .catch((error)=>{
          console.log(`データの取得に失敗しました (${error})`);
        });

        console.log("test2",self.sentenceArray);

      });

  data() {
    return {
      sentenceArray: []
      };
  },

現在firebaseからデータをとってくる処理をしたいのですが、sentenceArrayの中身をコンソールで表示すると、promiseResultと表示されてしまいます。

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]:

調べたところ、.thenで書いている中のデータが非同期処理されているので、このままでは変数に代入できないみたいです。
こちらでは正しく表示されるが、

console.log("test1",self.sentenceArray);

test2だと

console.log("test2",self.sentenceArray);

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]:

こちらの結果が返ってきます。

test2のコンソールでも[[PromiseResult]]を返さずに通常通りデータを表示させる方法が知りたいです。

わかる方いたら回答をお願いいたします。

参考

https://knews.vip/q/so77162792/promise-result-o-hensu-toshite-hozonsuru-hoho-wa-arimasu-ka-fukusei