Привязка коллекции в реальном времени не работает при первом входе пользователя в систему (Vue. js, Vuexfire, Firebase)

Question

Я разрабатываю систему уведомлений и наткнулся на Vuexfire, чтобы сделать привязку между коллекцией уведомлений и таблицей в реальном времени. Пока все хорошо, проблема в том, что я могу отправлять уведомления пользователям и группам одновременно, тогда, если выбран пользователь и группа, будут дубликаты ... Как избавиться от повторяющихся уведомлений, если они отправляются пользователю и группе одновременно? Мое текущее решение работает в 98% случаев, однако сразу после входа пользователя в группу уведомления не отображаются, если я не обновлю sh или не сделаю что-то в системе и не вернусь.

У меня есть userIds и массив groupIds в каждом документе, в котором хранится идентификатор пользователя или группы. Затем я сделал две привязки, как показано ниже в основном файле моего хранилища vuex.

Vue.use(Vuex)

export const store = new Vuex.Store({
  modules: { auth, groups, clients, users, erp, serviceOrders, general, notifications, productivity, management, setup, calendar},
  plugins: [
    createPersistedState({
      storage: window.sessionStorage,
      paths: ['auth.isAuthenticated', 'auth.userName', 'auth.userGroup', 'auth.user.email', 'auth.user.uid', 'auth.sessionStart', 'general.links', 'serviceOrders']
    })
  ],

  state: {
    newNotificationsUser: [],
    newNotificationsGroup: []

  },
  mutations: {
  ...vuexfireMutations
  },
  actions: {
    getNotificationsToUser: firestoreAction(({ bindFirestoreRef, state }) => {
       bindFirestoreRef('newNotificationsUser', db.collection('notifications')
      .where("userIds", "array-contains", state.auth.user.uid)) 
    }),
    getNotificationsToGroup: firestoreAction(({ bindFirestoreRef, state }) => {
      bindFirestoreRef('newNotificationsGroup', db.collection('notifications')
      .where("groupIds", "array-contains", state.auth.userGroup))
    })
  },
  getters: {

  }
})

Я получаю уведомления и сохраняю их в newNotificationsUser и newNotificationsGroup.

В моем компоненте есть что-то вроде это:

computed: {
    ...mapState({ uniqueNotifications: function(state){
      return Array.from(new Set (state.newNotificationsUser.concat(state.newNotificationsGroup)
      .map(e => JSON.stringify(e))))
      .map(e => JSON.parse(e))
    }
    }),
   },

methods: {
     ...mapActions( ['getNotificationsToUser', 'getNotificationsToGroup']),

}

mounted(){
    this.getNotificationsToUser()
    this.getNotificationsToGroup()

  }

Я объединяю оба массива, затем удаляю дубликаты и показываю результат в переменной uniqueNotifications. Проблема в том, что при первом входе в систему часть группы не загружается, только после того, как я перейду на другую страницу и вернусь или получу новое уведомление о том, что она будет заполнена.

Я попытался изменить установленный крючок для created и beforeMount, но безрезультатно. Я думаю, что проблема связана с методом concat ... Есть ли способ обойти это, не меняя полностью способ его реализации?

Просто несколько изображений, чтобы проиллюстрировать, о чем я говорю: После входа в систему и перенаправления на домой, где компонент уведомлений:

Then after a refresh or anything else it works

введите описание изображения здесь

Заранее спасибо!