[Vuejs]-How do I make Vue wait for Firestore to finish downloading collection?

There are few steps:

1. Wrap firestore code to a method and call it when component created
2. Use a flag isLoaded to check if data is loaded or not. You can use this flag to display loading state or hide component when data is not available.

Remember to change isLoaded flag to true when data is loaded

  this.scheduleList = scheduleList
  this.isLoaded = true

Component source code:

<template>
  <div v-if="isLoaded">

  </div>
</template>

<script>
export default {
  name: "",
  data: () => ({
    scheduleList: [],
    isLoaded: false
  }),
  created() {
    this.getData()
  },
  methods: {
    getData() {
      var db = firebase.firestore();
      var scheduleList = new Array;
      var calendar = db.collection('calendar');
      var wholeCalendarCollection = calendar.get()
            .then(snapshot => {
              snapshot.forEach(doc => {

                var dateData = new Array;
                dateData = doc.data();
                var startDate = new Date(dateData.start.seconds * 1000);
                var endDate = new Date(dateData.end.seconds * 1000);

                //all the variables used to create a date in the calendar
                var startDateString = startDate.toISOString();
                var endDateString = endDate.toISOString();
                var id = doc.id+1;
                var calendarId = id-1;
                var category = dateData.category;
                var title = dateData.title;

                var newDate = {
                  id: id,
                  calendarId: calendarId,
                  title: title,
                  category: category,
                  dueDateClass: '',
                  start: startDateString,
                  end: endDateString
                };


                console.log(newDate);
                scheduleList.push(newDate);

              })
              this.scheduleList = scheduleList
              this.isLoaded = true
            })
            .catch(err => {
              console.log('Error getting documents', err);
            });
    }
  }
}
</script>