Firestore クエリで取得したデータを配列表示にしたい

Question

前提・実現したいこと

（使用：Vue.js、Typescript）
クエリでサブコレクション全体を取得、配列にしたデータを表示さたいのですが、
クエリから取得したDocumentSnapshotをスコープの外で使用するのはどうしたら良いでしょうか？

currentUser = firebase.auth().currentUser!;
db = firebase.firestore();

async getData() {
  const qSnapshot = await this.db
    .collection('users')
    .doc(this.currentUser.email!)
    .collection('todolist')
    .get();
  const todolists: any[] = [];
  qSnapshot.forEach((dSnapshot) => todolists.push(dSnapshot.data()));
}
get todos(): ToDo[] {
  //ここから取得;
}

発生している問題・試したこと

todolistsをグローバルに表記すると

currentUser = firebase.auth().currentUser!;
db = firebase.firestore();
todolists: any[] = []
async getData() {
  const qSnapshot = await this.db
    .collection('users')
    .doc(this.currentUser.email!)
    .collection('todolist')
    .get();
  qSnapshot.forEach((dSnapshot) => this.todolists.push(dSnapshot.data()));
}
get todos(): ToDo[] {
  console.log(this.todolists);
  return this.todolists;
}

値が取得できず、コンソールは

となります。
（取得出来たらtodosはTodo型ではなくてany型になってしまうとは思います・・・。）

ご回答よろしくお願いします。

Answer 1

非同期処理はVue.jsではcreate()で呼び出すのが正解でした。

currentUser = firebase.auth().currentUser!;
db = firebase.firestore();
todos: any[] = []
created() {
  this.getData();
}
async getData() {
  const todos: any[] = [];
  const qSnapshot = await this.db
    .collection('users')
    .doc(this.currentUser.email!)
    .collection('todolist')
    .get();
  qSnapshot.docs.forEach((dSnapshot) => this.todos.push(dSnapshot.data()));
  console.log(todos);
  return todos;
}

お騒がせいたしました????