vuexfire | Check - SSR ready Firebase binding for Vuex | Authentication library

Your data comes in after the console.log. The console updates object/array logs with current values when you click, but can't do that with primitives. See this answer for more detail.

It should be enough to await the firebaseAction:

Please note that you will need to put the following in the Firebase Cloud Function to integrate the Razorpray:

I would refactor most parts of the codes in the question, since many of them are duplicates, such as:

Buttons.vue: Refactor button actions

The following should do the trick:

This is because you cannot modify the Object returned by doc.data().

The following, using the object spread operator to create a new plain object, should do the trick:

With Vuexfire, when you bind, you should only provide the key of the state where to bind, and the Source (Collection, Query or Document).

So if you want to bind to a subset of a collection, you need to bind to a Query and as such you need to know the Query definition (i.e. the definition of the subset).

If you want to bind, in "one action", a set of documents (which definition is dynamic, e.g. a set of docs identified through a variable list of ids) you may need to use another approach.

Either you can define a Query, for example, by having a field in the document with the ID and use the in operator to combine up to 10 equality (==) clauses on the same field with a logical OR.

Or you will need to create your own home-made binding, by for example using Promise.all() in a Vuex action.

From everything you have typed, it seems like preventing the fetchUser action from being called unnecessarily is paramount so I will focus on the one attempt you have tried, to prevent that from happening

I tried to check if the user is already present in the users array before calling fetchUser(). However, this doesn't work, because fetchUser is an async operation. It could be in the process of fetching, so checking to see if the user is already in the array usually tests false

How about this?

As you will see in the Vuexfire documentation:

Vuexfire does not handle writing data back to Firebase because you can directly use the Firebase JS SDK to precisely update whatever you need.

The doc gives some example of use of the "standard" JS SDK, exactly like you did in your question ("classic firebase command"). So you'll have to go this way, wrapping the database writes in Vuex Actions.