Firebaseのドキュメントの情報取得で困っております。

Vue、Vuetify、firebaseでアプリ開発をしております。

タイトル（title）や作成者のid（createrId）などのフィールドを持つprojectsコレクション内のドキュメントを一つずつv-forで取り出し、それぞれのプロジェクトごとにその作成者の名前とアバターを取得して表示したいのですが上手くいきません。

・usersコレクションの中のドキュメントはUIDをドキュメントIDとしており、projectsドキュメントのcreaterIdと対応しております。
・usersコレクションの中のドキュメントではユーザーのアバターURLをavatar、ユーザー名をonamaeとして保管しております。

原因がわかる方がいらっしゃいましたらお力をお貸しいただけると幸いです。

Vue
1
2<template>
3  <v-flex>
4    <v-hover v-for="project in projectItems" :key="project.title">
5      <v-card class="pa-3 mt-2" slot-scope="{ hover }" :class="`elevation-${hover ? 12 : 2}`" @click="goToProjectPage(project.id)">
6        <v-layout row wrap>
7          <v-flex xs12 md8 pl-4>
8            <h2 class="mb-3">{{ project.title }}</h2>
9          </v-flex>
10          <v-flex xs12 sm4 md2>
11            <v-layout column wrap>            
12              <div style="position: absolute; bottom: 20px; right:20px;">
13                <v-avatar size="30" class="mr-2">
14                  <img :src="getAvatar(project.createrId)" alt="">
15                </v-avatar>
16                {{ getName(project.createrId) }}
17              </div>
18            </v-layout>            
19          </v-flex>
20        </v-layout>
21      </v-card>
22    </v-hover>
23  </v-flex>
24</template>
25
26<script>
27import db from '@/fb'
28
29export default {
30  props: [
31    'projectItems',
32  ],
33
34  methods: {
35
36    getAvatar(id){
37      var docRef = db.collection("users").doc(id);
38      docRef.get()
39      .then((doc) => {
40        return doc.data().avatar;
41      }).catch((error)=>{
42        console.log(error)
43      });
44    },
45
46    getName(id){
47      var docRef = db.collection("users").doc(id);
48      docRef.get()
49      .then((doc) => {
50        return doc.data().onamae;
51      }).catch((error)=>{
52        console.log(error)
53      });
54    },
55
56  },
57}
58</script>
59