does not call api after router link is changed vuejs - vuejs2

Question

I have product listing page based on category.When i click enter first time in prodcut page after click category it call api.But after changing category url is changed but new template is not render.
ie,
if i click Drinks category (http://localhost:8080/#/categories/drinks) it shows items in drinks.After change Drink to starter (http://localhost:8080/#/categories/starter) url was changed but still drinks data shown.(new api call does not run).
<div class="swiper-slide w-auto p-2" v-for="(category,index) in categories" :key="index">
<router-link :to="{ name: 'categoriesItems.slug', params: { slug: category.slug }}"
class="icons icon-60 shadow-sm"
:class="slug == category.slug ? 'badge-warning' : ''"
>
<i class="material-icons text-default">{{category.icon_name}}</i>
</router-link>
<p class="small mt-2 text-mute">{{category.name}}</p>
</div>
index.js
{
path: '/categories/:slug',
name: 'categoriesItems.slug',
component: categoryItems
},
package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"#popperjs/core": "^2.9.3",
"#vue-stripe/vue-stripe": "^4.2.5",
"axios": "^0.21.1",
"bootstrap": "^5.1.0",
"core-js": "^3.6.5",
"jquery": "^3.6.0",
"moment": "^2.29.1",
"popper.js": "^1.16.1",
"swiper": "^5.4.5",
"vue": "^2.6.11",
"vue-awesome-swiper": "^4.1.1",
"vue-axios": "^3.2.5",
"vue-bootstrap-sidebar": "^1.0.9",
"vue-infinite-scroll": "^2.0.2",
"vue-loading-button": "^0.2.0",
"vue-loading-overlay": "^3.0.1",
"vue-moment": "^4.1.0",
"vue-router": "^3.2.0",
"vue-simple-alert": "^1.1.1",
"vue-stripe-checkout": "^3.5.15",
"vue-toastify": "^1.8.0",
"vue2-swiper": "0.0.13",
"vue2-timepicker": "^1.1.6",
"vuejs-dialog": "^1.4.2",
"vuelidate": "^0.7.6",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
app.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#import './assets/vendor/elegant_font/HTMLCSS/style.css';
#import './assets/vendor/materializeicon/material-icons.css';
#import './assets/vendor/swiper/css/swiper.min.css';
#import './assets/css/style.css';
</style>