title: VueJS: fetch data in loop to build full data
body: <p>I have nested fetching data for schools.
  Lifecycle looks like fetchSchools()->fetchfetchSchoolData(schoolId) 
  What is best solution to fetch nested data before render schools</p>
  
  <pre><code>    var app = new Vue({
        el: '#app',
        data: {
          schools : []
        },
  created:function{
      this.fetchSchools();
  
      //next
        this.schools = this.schools.filter(function (school) {
             school.additionalData = this.fetchSchoolData(school);
             return school;
       })
  
  },
        methods: {
            fetchSchools: function () {
              var url = this.buildApiUrl('/api/schools');
              this.$http.get(url).then(function (response) {
                  this.schools =  response.data;
              }).catch(function (error) {
                  console.log(error);
              });
          }, 
          fetchSchoolData: function (school) {
              var url = this.buildApiUrl('/api/school-detail?schoolId=' + school.id);
              this.$http.get(url).then(function (response) {
                  return response.data;
              }).catch(function (error) {
                  console.log(error);
              });
          }, 
        },
  
      })
  </code></pre>