Middleware to Vuex state not updating state?

Question

I am trying to get my firestore data that I am getting to be stored in my state but it does not show up in my Vue dev tools in the state.

When I console.log() the data I am getting through the store action I can see I am getting the right data but it will not update the state.

I am using middle-ware on my home page and another page to dispatch my action in order to get the required data.

I have also used a conditional statement within the middle-ware below to try to only dispatch action when my other state variables are not null because the firestore query requires state.user

//this is check-auth middleware
 export default function(context) {
 // in initAuth we are forwarding it the req
  context.store.dispatch('initAuth', context.req)
  console.log('WE ARE GRABBING USER INFO')
  context.store.dispatch('grabUserInfo', context.req)
  console.log('There is already user info there')
  // context.store.dispatch('currentUser')
   }

We are dispatching grabUserInfo to run a action that has a firestore query in it.

  grabUserInfo(vuexContext, context) {
     let userInfo = []
     var userRef = db.collection('users')
      var query = userRef
        .where('user_id', '==', vuexContext.state.user)
        .get()
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
          console.log(doc.data())
          userInfo.push(doc.data())
          })
        })
      vuexContext.commit('setUserInfoSub', userInfo)
    }

my

   console.log(doc.data()) is showing 

subscribers: ["noFace2"] subscriptions: ["noFace3"] user_id: "VbomJvANYDNe3Bek0suySs1L8oy1" username: "noFace1"

my info should be going through a mutation and commiting to state, but it does not show up in my state vue dev tools.

 setUserInfoSub(state, payload) {
    state.userInfoSub = payload
  }

I don't understand how the data is not ending up in my state. Here is my State and mutations.

  const createStore = () => {
   return new Vuex.Store({
    state: {
     loadedCards: [],
     user: null,
     username: null,
     userInfoSub: [],
     token: null
   },
    mutations: {
    setCards(state, cards) {
    state.loadedCards = cards
    },
    setUser(state, payload) {
    state.user = payload
    },
     setUsername(state, payload) {
     state.username = payload
    },
    setUserInfoSub(state, payload) {
    state.userInfoSub = payload
    },
    setToken(state, token) {
    state.token = token
  }

Answer 1

Change your mutation to this:

 setUserInfoSub(state, payload) {
    Vue.set(state, 'userInfoSub', payload);
    }

This will allow Vue's reactivity system to kick back in for the state variable reassignment.

Per @Alexander's comment, you should also move the commit() inside then() given the async nature of the Firebase query.