title: Fetching data from api before render component
body: <p>I'm sending 2 api requests before render the page:</p>
  
  <pre><code>const Profile = {
      template: '#profile',
      attributes: null,
      photos: [],
      data: function () {
          return {attributes: Profile.attributes, photos: Profile.photos};
      },
      beforeRouteEnter: function (to, from, next) {
          function getProfile() {
              return axios.get('user/get-profile?access-token=1', {responseType: 'json'});
          }
          function getPhotos() {
              return axios.get('photos?access-token=1', {responseType: 'json'});
          }
  
          axios.all([getProfile(), getPhotos()])
              .then(axios.spread(function (profile, photos ) {
                  console.log(profile, photos );
                  next(vm =&gt; {
                      vm.setProfile(profile);
                      vm.setPhotos(photos);
                  })
              }));
      },
      methods: {
          setProfile: function (response) {
              Profile.attributes = response.data;
              console.log(Profile.attributes);
          },
          setPhotos: function (response) {
              Profile.photos = response.data;
              console.log(response);
          },           
      }
  };
  </code></pre>
  
  <p>The problem is rendering occures before <code>setProfile</code> and <code>setPhotos</code> methods. How to correct render my component?</p>