Vue, flow between Vuex and Vue component - vue.js

Question

Im devoloping a Vue Frontend and my problem is the flow between Vuex and vue component.
Vuex component
const state = () => ({
User: {
Firstname: '',
Lastname: '',
MainAccountBalance: '',
SubAccount: []
}
})
const getters = {
getUserData(state) {
console.log("3 Dashboard: getter")
return state.User;
}
};
const actions = {
async fetchUserProfile({commit}, payload) {
await instance.post(UserAccounts, {
token: payload.token
})
.then(response => {
console.log("1 Dashboard: fetchUserProfile");
commit('saveAccounts', response.data);
return JSON.stringify(response.data);
})
}
};
const mutations = {
saveAccounts(state, data) {
const newModel = {
Firstname: data.Firstname,
Lastname: data.Fastname,
MainAccountBalance: data.MainAccountBalance,
SubAccount: data.SubBankAccounts
}
console.log("2 Dashboard: Mutations")
state.User = newModel;
}
};
fetchUserProfile is getting called from Vue component and gets commited to saveAccounts where it will set data for state variables. All of this works fine, and in correct order. The problem starts with when i want to get the data from the State using getters.
Vue component
computed: {
...mapGetters("auth", {
getUserData: 'getAuthData'
}),
},
methods: {
...mapActions("dashboard", {
userProfileaction: "fetchUserProfile"
}),
getUserToken() {
this.access_token = localStorage.getItem("access_token")
return this.access_token;
},
async saveUserData() {
var userToken = this.getUserToken();
await this.fetchUserProfile({token: userToken})
this.Firstname = this.getUserData.Firstname;
this.Lastname = this.getUserData.Lastname;
console.log("Last Show accounts: "+ this.getUserData.User.Firstname)
}
},
mounted() {
this.saveUserData()
console.log("test")
}
How would i use getters correct so it doesent execute before the variables are set on Vuex? Is there an better alternative way?