Массив объекта JSON не пуст, но не может выполнять итерацию с foreach, показывать нулевую длину

Я прочитал сборник о книге checkout из firestore в create().

Данные хранятся в массиве checkout, объявленном в data().

export default {
  name: "checkout-history",
  data() {
    return {
      checkout: []
      ]
    };
  },
  created() {
    db.collection("checkout")
        .get()
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
            const data = {
              id: doc.id, // firebase document id
              book_did: doc.data().book_did,
              borrowed_date: doc.data().borrowed_date,
              copies_did: doc.data().copies_did,
              due_date: doc.data().due_date
            };
            this.checkout.push(data); // push to array
          });
        });

      console.info(this.checkout)  // show data, as in the image below

      console.info(this.checkout.length)  // get 0
      console.info(Object.keys(this.checkout).length)  // get 0
      }
      ......

Когда я запускаю console.info(this.checkout);, консоль показывает это:

Однако я не могу повторить это, консольное шоу this.checkout.length есть 0

Я также пытался использовать Object.keys, но безуспешно.

Object.keys(this.checkout).forEach(key => {
     const keys = this.checkout[key];
     console.info(keys);
});

Я действительно не знаю, что делать дальше.

Я прочитал много ответов в Интернете и попробовал большинство из них, но ни один из них не работает.