Using Axios in VUEX state on loading application and using AXIOS in Component

I am unable to resolve the following problem at the moment.

1.When you have successfully logged in, the following code will be called in Layout.vue to create a state. (You will then go directly to: /dashboard)

mounted() {
    this.$store.dispatch(DCOMPONENTS);
}

2.Then I go to /sales and a dispatch is done again within the Sales.vue component:

methods: {
         async loadTable() {
         await this.$store
          .dispatch(SALES)
            let tableName = 'SalesTable';
            var components = this.getComponents;
            var sales = this.getSales;
            var i;
          
            for (i = 0; i < components.length; i++) {
              if (components[i].name == tableName) {
                var structure = components[i];
              }
            }

            var jsonData = {};
            jsonData.structure = structure;
            jsonData.data = sales;
            this.structureTable = jsonData;
            this.dynamicComponent = Tables;
      },

Normally this goes well. When I am in / dashboard, time is lost navigating to / sales, so that the first AXIOS call is also ready, when the second AXIOS call via (dispatch) is also ready in the component, I have all the data.

However, the problem: When I am logged in and I am in /sales as a route. Press F5 (refresh), then it may be in some cases that the first AXIOS call (from Layout.vue) is not yet ready while the AXIOS call via (Sales.vue) is ready. I am missing data so that my Array is not filled.

My question: How can I ensure that the first AXIOS call made in Layout.vue (which stores the first data in STATE) is always ready before I make a new AXIOS call (dispatch) in Sales.vue?