Vuefire data not subscribing to changes

Question

I have several different queries that I need to keep 'live' data from. When I hardcode the query it successfully shows all live changes that happen in the database. But when I pass a payload the data won't change until reloaded.

Working Query:

getOnline: firestoreAction(({ bindFirestoreRef }) => {
      
      return bindFirestoreRef('online', db.collection('units').where('unit.on', '==', true).orderBy('info.timestamp', 'desc').orderBy('unit.status'))

    }),

Not working Payload Query: gets data once

getFilterSystemId: firestoreAction(({ bindFirestoreRef} , payload) => {
      
      return bindFirestoreRef('filterBySystemId', db.collection('units').where('unit.group', '==', payload.group).orderBy('info.timestamp', 'desc').orderBy('unit.status'))

    }), 

I pass the payload simply:

filterSystemId(grouphex){

    let payload  = {
      group: grouphex.toString(),
    }

    this.getFilterSystemId(payload);

  },

How do I pass a payload AND get live updates to any changes that happen in the database?

Answer 1

Ended up using vuefire instead of vuexfire and dynamically binding my queries like this.

const vuefire = db.collection('vuefire')

export default {
  components: {},
  data() {
    return {
    //view
    vuefire: [],
    id: 'true',
    user: [],
    code: 'true'
     
    };
  },

  created() {
  },

  // firestore: {
  //   vuefire: db.collection('vuefire')
  // }

  watch: {
    id: {
      // call it upon creation too
      immediate: true,
      handler(id) {
        this.$bind('user', vuefire.where('a', '==', id))
      },
    },

Anytime 'id' changes the dataset ('user') is recomputed and accomplishes my goal