vue.js - Looping over parent data (set via Ajax) in child components -

how can loop on data set via ajax in component methods? problem when try call method perform loop on component mounted(), data isn't there yet. how can tell vue component wait ajax data arrive execute function?

vue.component('sidebar', {    props: ['people'],    template: `          <div id="sidebarcontain" v-if="this.people">              <div v-for="person in people" :class="[{'checked-in': ischeckedin(person)}, 'person']" :id="person.id">                  {{person.first_name + ' ' + person.last_name}}              </div>          </div>      `,    methods: {      ischeckedin(person) {        return person.reg_scan == null ? true : false;      },      displayname() { //this function want run when ajax data done , passed parent child        (var = 0; < this.people.length; i++) {          console.log(this.people[i]);        }      }    },    mounted() {      this.displayname();    }  });    var app = new vue({    el: '#main',    data: {      people: []    },    methods: {      loadpeople() {        $.ajax({          method: 'post',          datatype: 'json',          url: base_url + 'users/getparticipants/' + event_id        }).done(data => {          this.people = data;        });      },      setrefresh() {        setinterval(() => {          console.log("getting people");          this.loadpeople();        }, 10000);      }    },    mounted() {      this.loadpeople();      this.setrefresh();    }  });

<div id="app">    <sidebar :people="people"></sidebar>  </div>

you can set watcher on people array , call displayname function on watcher. whenever data in people array changes watcher run, run when ajax request returns data api. option run loop on callback.