title: mounted method is fired before data loaded - VueJS
body: <p>I'm using <a href="https://github.com/pagekit/vue-resource/" rel="noreferrer">Vue Resource</a> to retrieve an images collection from a REST API. The request is sent in the <code>created</code> hook of my Vue component.  </p>
  
  <p>The problem is, I'm trying to access the retrieved data in the <code>mounted</code> hook, but the data isn't loaded. </p>
  
  <p>I get this error in the console:</p>
  
  <blockquote>
    <p>[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'forEach' of undefined"</p>
  </blockquote>
  
  <p>Here is my component:</p>
  
  <pre><code>&lt;script&gt;
  export default {
    data() {
      return { imgs : '' };
    },
    created() {
      // the full url is declare in my main.js
      this.imgs = this.$resource('acf/v3/pages/4');
  
      this.imgs.query().then((response) =&gt; {
        console.log('success', response);
        this.imgs = response.data.acf.gallery;
      }, (response) =&gt; {
        console.log('erreur', response);
      });
    },
    mounted() {
      // get the ref="image" in my dom template
      let imgs = this.$refs.image;
  
      imgs.forEach((img) =&gt; {
        // I do some stuff with imgs
      });
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>If I wrap a <code>setTimeout</code> around the content of <code>mounted</code>, everything works fine. </p>
  
  <p>So, I don't understand how I can wait for my data to load before the <code>mounted</code> hook is executed. Isn't this the role of the Vue lifecycle hooks? </p>