Vuejs display result after completion of async request

I am displaying the name of the current user after querying it from the firestore database like so:

 database
    .collection("members")
    .doc(id)
    .get()
    .then(doc => {
      this.currentUserDetails.name =
        doc.data().first_name + " " + doc.data().last_name;
    });

then after fetching the result it should be something like below:

However it does not display the name after the result is fetched immediately,since it takes some time. I am only able to show it after I change some property such as the margin.

How can I display it immediately the result is caught.

My template code:

 <v-navigation-drawer app v-model="drawer" class="text-xs-center">
  <v-avatar class="mt-5 mb-4" size="100">
    <img src="/img/avatars/admin.png">
  </v-avatar>

  <p class="subheading font-weight-bold mb-1">{{currentUserDetails.name}}</p>
  <p class="text-capitalize mb-3">{{currentUserDetails.userType}}</p>

Answer

Assign new object reference in the this.currentUserDetails for reactivity.

this.currentUserDetails.name =
    doc.data().first_name + " " + doc.data().last_name;

// assign new object reference in 'this.currentUserDetails'
this.currentUserDetails = Object.assign({}, this.currentUserDetails)

Alternate: you can use this.$set() to get the reactivity working:

// using this.$set(...)
this.$set(this.currentUserDetails, 'name', doc.data().first_name + " " + doc.data().last_name);

Vue.js Docs