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个之后的项目会失去反应性。我猜想这与将项目推入数组的方式有关，但是我似乎找不到其他方法。有指针吗？谢谢！