Vue.js 如何在 vue js 的一页路由下显示不同的 category._id

我试图在一条路由下显示多个类别，单击第一个类别显示我的产品，但当我单击另一个类别时，它不会显示产品，直到硬刷新我的页面，该页面现在显示类别下的产品列表

<nav class="navbar-end">
          <div
            class="pt-4 p-3"
            v-for="category in categories"
            :key="category._id"
          >
            <router-link :to="`/categories/${category._id}`">
              {{ category.type }}
            </router-link>
          </div>

        </nav>

这是我的脚本标签，用于获取类别下的产品列表

<script>

import axios from "axios";
export default {
  name: "Product",
  components: {},
  data() {
    return {
      category: {},
      categories: [],
      products: [],
      catID: []
    };
  },
  mounted() {
    axios
      .get(
        `http://localhost:5000/api/categories/${this.$route.params.id}`,
        {}
      )
      .then(response => {
        console.log(response);
        this.category = response.data.category;
      })
      .catch(error => {
        console.log(error);
        error;
      });

    axios
      .get(`http://localhost:5000/api/products`, {})
      .then(response => {
        console.log(response);

        this.products = response.data.products;
        const catID = this.category._id;
        // this.products = this.products.filter(
        //  ({ category }) => catID === category._id
        // );
      })
      .catch(error => { 
        error;
      });
   
  },
 
  computed: {
    currentProducts() {
      if (!this.category._id) {
        return this.products;
      }
      return this.products.filter(
        ({ category }) => category._id === this.category._id
      );
    }
  },
  methods: {
    ...mapActions(["addProductToCart"]),
    logout() {
      localStorage.clear();
      this.$router.push("/login");
    }
  }
};
</script>

这是我的分类路由

  {
    path: "/categories/:id",
    name: "Category",
    component: Category
  },

我在单击第一个类别后获得产品，但单击另一个类别会更改我的类别.id url，但直到我硬刷新才更新，它现在显示产品列表.请告诉我如何显示同一类别的产品.具有硬刷新的id路由