I have a product list page and productdetails page. When I click on the card of the product,it should go to that product detail page with the ID passed, but it doesnt happen.

I have two console.log. One for function viewDetails actually being called. I can see it is called as the log shows. Another log is in the product detail vue. Its in the lifecycle hook of created. But i dont see the log appear in the dev tools.

ProductList.vue

<template>           
  <div id="app">
    <!-- Navbar -->
    <nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Intellishop</a>        
      </div>

    </nav>

    <!-- Main Content -->
    
    <div class="container mt-4">
      <h1 class="text-center">Our Products</h1>
      <div class="row">
        <div v-for="product in products" :key="product.id" class="col-lg-3 col-md-4 col-sm-6 mb-4">
          <div class="card" @click="viewDetails(product.id)">
            <img :src="product.image" class="card-img-top product-image" alt="Product Image">
            <div class="card-body">
              <h5 class="card-title">{{ product.item_name }}</h5>
              <p class="card-text">Price: ${{ product.new_price }}</p>
              <p class="card-text">Discount: {{ product.discount }}%</p>
              <p>Seller: {{ product.seller }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>  
      <!-- Pagination Controls -->
      <div class="pagination-container text-center mt-4">
        <button 
          class="btn btn-primary mx-1"
          :disabled="currentPage === 1"
          @click="fetchProducts(currentPage - 1)"
        >
          Previous
        </button>
        
        <span v-for="page in totalPages" :key="page">
          <button 
            class="btn btn-secondary mx-1"
            :class="{ 'btn-primary': page === currentPage }"
            @click="fetchProducts(page)"
          >
            {{ page }}
          </button>
        </span>
        
        <button 
          class="btn btn-primary mx-1"
          :disabled="currentPage === totalPages"
          @click="fetchProducts(currentPage + 1)"
        >
          Next
        </button>
      </div>
    </div>
  
</template>

<script>
import axios from 'axios';
// import LoginModal from "./LoginModal.vue";
// import LoginModal from "./Navbar.vue";
// import Navbar from './Navbar.vue';

export default {
  

  data() {
    return {
      products: [],
      currentPage: 1,
      pageSize: 8,
      totalPages: 0,
    };
  },
  created() {
    this.fetchProducts();
    console.log("i am being called")
  },
  methods: {
    async fetchProducts(page = 1) {
      try {
        const response = await axios.get(`http://127.0.0.1:8000/api/products?page=${page}`);
        this.products = response.data.results || [];
        console.log(this.products)
        this.totalPages = Math.ceil(response.data.count / this.pageSize);
        this.currentPage = page;
      } catch (error) {
        console.error("There was an error fetching the products!", error);
      }
    },
    navigateToLogin() {
      // Replace with your actual login route
      this.$router.push('/login');
    },
    viewDetails(productId) {
      console.log("Navigating to:", `/product/${productId}`);  // Debugging log
      this.$router.push(`/product/${productId}`).catch(err => {
      if (err.name !== "NavigationDuplicated") console.error(err);
      });
    }, 
  }
};

</script>

My index.js inside router folder

import Vue from 'vue';
import VueRouter from 'vue-router';
import ProductDetails from '../components/ProductDetails.vue';

// import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';


Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  { path: '/product/:id', component: ProductDetails },
];

// const router = createRouter({
//   history: createWebHistory(process.env.BASE_URL),
//   routes,
// });

const router = new VueRouter({
  mode: 'history', // Correct for Vue Router v3
  routes,
});


export default router;

My ProductDetails.vue

<template>
    <div>
      <h1>Product Details</h1>
      <p><strong>Name:</strong> {{ product.item_name }}</p>
      <p><strong>Price:</strong> ${{ product.new_price }}</p>
      <p><strong>Discount:</strong> {{ product.discount }}%</p>
      <p><strong>Seller:</strong> {{ product.seller }}</p>
      <img :src="product.image" alt="Product Image" />
    </div>
  </template>
  
  <script>
  export default {
  data() {
    return {
      product: null, // Start with no product
    };
  },
  created() {
    console.log("ProductDetails component created.");
    this.fetchProductDetails();
  },
  methods: {
    async fetchProductDetails() {
      const productId = this.$route.params.id; // Get ID from the route
      console.log(productId)
      try {
        const response = await axios.get(`http://127.0.0.1:8000/api/products/${productId}`);
        this.product = response.data;
      } catch (error) {
        console.error("Error fetching product details:", error);
      }
    },
  },
};
</script>

What is the problem here?