Vue Firestore - загружает больше документов, но сохраняет реактивность

Question

Поэтому, когда я загружаю страницу, я выбираю последние 10 элементов:

firestore: {colors: db.collection('colors').orderBy('createdAt', 'desc').limit(10),},

Но я хочу добавить кнопку для загрузки следующих 10, каждый раз, с этой функцией:

loadNextColors: function() {
  let self = this;
  console.log('Loading next batch of colors after '+self.colors[self.colors.length - 1].createdAt);
  var query = db.collection('colors').orderBy('createdAt', 'desc').startAfter(self.colors[self.colors.length - 1].createdAt).limit(10)
  query.get()
    .then(function(querySnapshot) {
      querySnapshot.forEach(doc => {
          let color = doc.data()
          color.id = doc.id
          self.colors.push(color)
      })
    })
    .catch(function(error) {
      console.log("Error getting documents: ", error);
    });
},

Это прекрасно работает, однако предметы после первых 10 теряют реактивность. Я предполагаю, что это как-то связано с тем, как я помещаю элементы в массив, но я не могу понять, как еще это сделать. Есть указатели? Спасибо!