title: Retrieve Firestore data and populate Vuejs but v-html update is not working
body: <p>I am retrieving firestore data and populate to the interface with Vuejs. Unfortunately, the innerHTML is not updated and I am stuck for 3 hours but still do not know where have I done wrong.</p>
  <p>HTML</p>
  <pre><code>&lt;section&gt;
          &lt;div v-html=&quot;boardDetails&quot;&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p>Vuejs</p>
  <pre><code>Vue.component('dashboard', {
      template: '#dashboard',
      data() {
          return {
              boardDetails: ''
          }
      },
      mounted(){
          var studIdentity, studName, studEmail, photoUrl, uid, emailVerified;
  
          firebase.auth().onAuthStateChanged(function (user) {
              if (user) {
                  studIdentity = user;
                  if (studIdentity != null) {
                      studName = studIdentity.displayName;
                      studEmail = studIdentity.email;
                      photoUrl = studIdentity.photoURL;
                      emailVerified = studIdentity.emailVerified;
                      uid = studIdentity.uid;
                  }
  
                  var boardId = [];
                  ref_du.get().then(function (snapshot) {
                      snapshot.forEach(childSnapshot =&gt; {
                          let data = childSnapshot.data();
                          let st_id = childSnapshot.id;
                          let userId = data.studId;
  
                          if (userId == uid) {
                              boardId.push({ st_id: st_id, t_id: data.taskboardId });
                          }
                      });
                  });
  
                  var boardInfo = []
                  du.get().then(function (snapshot) {
                      snapshot.forEach(childSnapshot =&gt; {
                          let data = childSnapshot.data();
                          let t_id = childSnapshot.id;
  
                          for (let i = 0; i &lt; boardId.length; i++) {
                              if (boardId[i].t_id == t_id) {
                                  boardInfo.push({ t_id: t_id, name: data.taskboardName, date: data.createdDate });
                              }
                          }
                      });
  
                      let html = '';
                      for (let i = 0; i &lt; boardInfo.length; i++) {
                          html += `
                  &lt;div style=&quot;color:red;&quot;&gt;${boardInfo[i].name}&lt;/div&gt;
              `;
                      }
                      this.boardDetails = html;
                      console.log(this.boardDetails);
                  });
  
              } else {
                  window.location.href = 'index.html';
              }
          });
          
      }
  });
  </code></pre>
  <p>The console log shows that the boardDetails is updated but the interface does not show anything.
  <a href="https://i.stack.imgur.com/BZ9P9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BZ9P9.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/Vtb9x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vtb9x.png" alt="enter image description here" /></a></p>