Обновление или удаление массива объектов Firebase в приложении vue js

Question

В моем приложении Vue js я помещаю данные из коллекции firebase firestore в массив в виде объектов, чтобы отобразить их в таблице

export default{
created(){
const thisIns= this
let user = firebase.auth().currentUser
let Ref = firebase.firestore().collection('College')
Ref.get().then(snapshot=>{
  snapshot.forEach(doc=>{
  let id = doc.id
  Ref.doc(id).collection('Students').onSnapshot(function(snapshot){
      snapshot.docChanges().forEach(function(change){
           if(change.type==="added"){
          let obj = change.doc.data()
          thisIns.students.push(obj)

})
})
})
})
}

этот массив студентов затем отображается в стол . Теперь проблема заключается в том, что всякий раз, когда выполняется обновление в документе, содержащем информацию о студентах, вместо изменения данных в массиве он выталкивает тот же документ, содержащий обновленные значения в массиве студентов, таким образом, один и тот же ученик встречается более одного раза, один с предыдущими деталями и один с обновленными деталями, это исправляется только при обновлении страницы, то же самое, когда любой документ учащегося удален, страницу необходимо обновить для удаления из таблицы / массива. Как можно выполнить обновление / удаление без перезагрузки страницы, чтобы приложение не увеличивало количество чтений?