Real time binding of collection not working when user first logs in (Vue.js, Vuexfire, Firebase)

Question

I am developing a notification system and I came across Vuexfire to make the bindings between the notifications collection and the table in real-time. So far so good, the problem is: I can send notifications to users and groups ath the same time, then if the user is selected and the group as well, there will be duplicates... How to get rid of duplicate notifications if they're sent to the user and to the group at the same time? My current solution works 98% of the time however, right after the user logs in the group notifications do not show, unless I refresh or do something in the system and come back.

I have a userIds and groupIds array in each document that stores the ID of the user or group. Then I made two bindings, as shown below in my vuex store main file.

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: {

  }
})

I get the notifications and store them in newNotificationsUser and newNotificationsGroup.

In my component I have something like this:

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()

  }

I concatenate both arrays and then remove duplicates and show the result in the uniqueNotifications variable. The problem is this, at first sign-in it does not load the group part, only after I navigate to another page and come back, or receive a new notification that it will be populated.

I have tried changing the mounted hook for created and beforeMount but to no avail. I think the problem is with the concat method... Is there any way to workaround this without changing completely the way it is implemented?

Just some pictures to illustrate what I am talking about: After login and redirect to home where the notifications component is:

Then after a refresh or anything else it works

Thanks in advance!