title: Is it possible to run v-for after created() is complete?
body: <p>I am trying to add the corresponding avatar to each notification, so I can display it along with the rest of notification, but I can't figure this out on my own. Here's the HTML inside the Vue.js template:</p>
  
  <pre><code>    &lt;li class="notification" v-for="(notification, index) in notifications"&gt;
          &lt;a&gt;
              &lt;span class="image"&gt;
                  &lt;img :src="notification.avatar" alt="Avatar" /&gt;
              &lt;/span&gt;
  
          &lt;span class="link"&gt;
              &lt;span v-text="notification.data.sender_name"&gt;&lt;/span&gt;
          &lt;/span&gt;
  
          &lt;span class="message" v-text="notification.data.message"&gt;&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p>And here's the js:</p>
  
  <pre><code>data() {
      return {
          user: this.initialUser,
          notifications: this.initialUser.unread_notifications,
      }
  },
  
  created() {
      let self = this;
      self.notifications = this.initialUser.unread_notifications;
  
      self.notifications.forEach(function(notification) {
          if(notification.data.sender_id) {
              axios.post(self.user.path + '/get-avatars', {
                  id: notification.id,
              }).then((response) =&gt; {
                  let promise = new Promise(function (resolve, reject){
                      notification.avatar = response.data;
                  });
              });
          }
      });
  },
  </code></pre>
  
  <p>The problem that I'm having is that the <code>v-for</code> runs before the <code>created()</code> method, so that my notifications object does not have the avatar property at the time the v-for is performed.</p>
  
  <p>Is there any way I could run the v-for only after the created() has been completed?</p>
  
  <p>Thank you!</p>