Losing data on a browser refresh in Vue.js applica

Question

Background

In a Vue.js application I am calling Getter VueX function in the mount life cycle method. This works great and retrieves all my customer data when the page loads.

The problem I seem to be facing is when I refresh the web page the mount method does not fire and the data is all removed from state which I have no access to till I navigate away from the page and then come back. At the point I return the mount function fires and I have the customer data back again.

Example

mounted() {
    this.getCustomers();
  },

async getSelected() {
      console.log("Customer ", this.customer.email);
      this.currentCustomer = this.customer;
      this.updateCustomerData.clientID = this.currentCustomer.client_id;
      this.updateCustomerData.email = this.currentCustomer.email;
      this.updateCustomerData.password = this.currentCustomer.password;
      this.customer = this.customer.email;
      await this.RECEIVE_CLIENT_NOTES(this.currentCustomer.client_id);
    },

That function above calls a VueX Getter to retrieve data that is used inside of a Material Auto Complete Search component. It fires off when I navigate to the page but does not fire at all when I am on the page and refresh. The refresh clears the state and leaves me without data on page reload.

Question

How should I handle page refreshes in order to maintain my data or recall the Getter from VueX to repopulate my data?