[Vuejs]-How can i wait for API callback to completely render a component?

At first make the source=null

export default {
  data() {
    return {
      source: null,
      room_id: ChatRoom.id(),
      participants:[],
      messageList: [],
    };
  },
  created(){
    axios.get(`/api/room/${this.room_id}/message`)
      .then(res => {
        let source = res.data.data
        // Array.prototype.forEach.call(source, child => {
        //   const parti = Object.keys(child.participants).map(i => child.participants[i])
        //   this.participants.push({'id': parti[0], 'name' : parti[1], 'imageUrl' : parti[2]});
        //   const message = Object.keys(child.body).map(i => child.body[i])
        //   this.messageList.push({'type': message[0], 'author' : message[1], 'data' :message[2] });
        // });
        
        // a better way:
        this.participants = [source.participants]
        this.messageList = [source.body]
        
        this.source = source
      });
  }
};

And in template:

<beautiful-chat 
  :participants="participants" 
  :messageList="messageList"
  v-if="source"
/>

Also you can use computed property.