Delay in loading the response when I am switching between tabs present in the header of vue component

I have vue component in which I have multiple options(tabs) like "All, Submitted, Rejected etc" on my header. According to the functionality when I click on any of the options, the data for them loads from the api's. I have defined the all the api's on the same component for all the options.

Now when I switch between these options the api with large data takes time to load which is affecting the content of that particular option.

               switch (arg) {
                case this.statusVal[0]:
                    this.activate(arg);
                    this
                        .$router
                        .push({
                            name: "sales-approver-dashboard",
                            params: {
                                dropType: this.headerDropdownClaim,
                                approverClaimType: this.statusVal[0]
                            }
                        });
                    this.fetchData()
                    this.claimTableData.claimStatus = "";
                    break;

                  case this.statusVal[1]:
                    this.activate(arg);
                    this
                        .$router
                        .push({
                            name: "sales-approver-dashboard",
                            params: {
                                dropType: this.headerDropdownClaim,
                                approverClaimType: this.statusVal[1]
                            }
                        });
                    this.fetchData()
                    this.claimTableData.claimStatus = this.statusVal[1];
                    break;

the fetchData() functions calls the post request which has the response containing the data of each options. So when I quickly move between these options, the response with large data is taking more time to load while I am already in the different tab having less data whose response is already loaded but it is showing the data of last loaded response(as it contains the large amount of data)

Edited question

1. I am opening the dashboard having different tabs/options to switch between.
2. On first load api with data is calling having all the data.
3. I am calling the fetchData function which is basically displaying the data through post request and taking the response only which is required on that page based on the pages/tabs.
4. I am switching between the tabs through routing of vue js as above code (case1, case2) and each tab is again calling that fetchData function which shows the data based on that tab.
5. So when I routes between tabs, suppose I have large response for first tab and very less for the tab on which I have moved on. So what is happening in that case, that previous page fetchData function is still in execution but I have routed to next page which has less response let's say only one data. Because of that it loads quickly but the previous function is still in execution and loads after the this one.

Because of that the data of 2nd tabs loads first and I am able to see that data on screen but as soon as the first function is executed that data is now displayed on the screen which is wrong. So is there any solution like we can stop the execution of that previous function as soon as route to next page.