title: V-text does not update after new firebase values are added
body: <p>Using firebase and vuejs I need to load a post. That post contains comments that those comments were made by a user (recognizable by the user_uid) of whom we need to know the nickname, stored in the users/"user_uid" folder.</p>
  
  <p>My firebase database structure looks like this:</p>
  
  <pre><code>posts
      randompostid1
           user_uid: postmaker,
           content: "examples"
           comments:
                   randomcommentid123
                         text: "Comment example"
                         user_uid: commenter
                   randomcommentid99
                         text: "another comment example"
                         user_uid: anothercommenter
  
  
  users
       commenter &lt;-------------------- commenter userid
           email: email@gmail.com
           nickname: "Mr commenter"
       postmaker&lt;--------------------anotheruserid
           email: email@gmail.com
           nickname: "Mr post-maker"
       anothercommenter &lt;------------ another commenter userid
           email: example@google.com
           nickname: "another commenter"
  </code></pre>
  
  <p>To retrieve all the post information we first read the post (e.g randompostid1). Then we will have a dictionary of comments with user_uid's of whom we need to retrieve the nickname. I use a for_loop to loop through the uid's to get the adaquate nicknames.  See code below:  </p>
  
  <pre><code>watch: {
     comments: function(val){
        if (val != ""){
           for (let key in val){
              db.ref("users/" + val[key].uid).once("value").then(function(snapshot){
              val[key]["nickName"] = snapshot.val().nickname
              })
            }
         }
       }
    }
  </code></pre>
  
  <p>Then I try to display the nickname in a v-text element. The logging function simply logs the value of "comments". Note: "comments" is passed as a prop.</p>
  
  <pre><code>  &lt;div class='comment' v-for='comment in comments'&gt;
     &lt;div class='uid' v-text='comment.nickName'&gt;&lt;/div&gt;
     &lt;div class='text' v-text='comment.text'&gt;&lt;/div&gt;
     &lt;button @click='logging'&gt;button&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The nickName will be shown as undefined in the v-text, but in "logging()" it will be included in the logged value of comments. Why is the "nickName" undefined in the v-text, even though it is defined when "comments" is logged?
  Any help is much appreciated.</p>
  
  <p>Edit: 
  Solved by comment.
  The line</p>
  
  <pre><code> val[key]["nickName"] = snapshot.val().nickname
  </code></pre>
  
  <p>should be replaced by</p>
  
  <pre><code> this.$set(val[key], "nickName", snapshot.val().nickname)
  </code></pre>