title: Vue.js component not loading/rendering data when called via URL or F5
body: <p>I have a Vue.js SPA with some pages that display data from a backend. When I navigate the pages via the navbar, everything works fine, components and data are loaded.</p>
  
  <p>When I'm on the page, e.g. <em>localhost:8080/#/mypage</em> and press F5, the data doesn't get loaded / rendered. Same goes for when I directly navigate to the page via the address bar.</p>
  
  <p>The data gets loaded in this function:</p>
  
  <pre class="lang-js prettyprint-override"><code>async beforeMount() {
      await this.initializeData();
  }
  </code></pre>
  
  <p>I've tried to call the method in every lifecycle hook, i.e. created, beforeCreated, mounted etc...</p>
  
  <p>In the mounted lifecycle hook I'm setting a boolean property to true, so that the table is only rendered when the component is loaded (done with v-if).</p>
  
  <pre class="lang-js prettyprint-override"><code>mounted() {
      this.componentLoaded = true;
  }
  </code></pre>
  
  <p>Not sure if this is important, but I've tried it with or without and it doesn't work.</p>
  
  <p>I would really appreciate it if somebody knew whats happening here.</p>
  
  <p>EDIT:</p>
  
  <p>this.applications is a prop and contains multiple applications which contain instances. I want to add some variables from the backend to each application.</p>
  
  <ul>
  <li>console.log(1) gets printed</li>
  <li>console.log(2) does not</li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>initializeData: function () {
        let warn = 0;
        console.log("1");
  
        this.applications.forEach(async application =&gt; {
          const instance = application.instances[0];
  
          console.log("2");
  
          let myData = null;
  
          try {
            const response = await instance.axios.get('url/myData');
            myData = response.data;
          } catch (err) {
          }
  
          let tmpCount = 0;   
          let tmpFulfilled = 0;
  
          myData.forEach(ba =&gt; {
              if(!ba.fulfilled){
                warn++;
                application.baAllFulfilled = false;
              }else {
                tmpFulfilled++;
              }
              tmpCount++;
            })
  
          console.log("3");
  
          // Assign values
          this.baTotalWarnings = warn;
          application.baAnzahl = tmpCount;
          application.baFulfilled = tmpFulfilled;
  
          this.componentLoaded = true;
        }
  </code></pre>