Estoy haciendo una página de lista en vuejs. Y ahora estoy teniendo algunos problemas de la siguiente manera:

 <template> <vue-good-table :columns="columns" :rows="row" :search-options="{ enabled: true, externalQuery: searchTerm, }" </vue-good-table> </template> <script> data() { return: { row: []; columns: [ { label: "Name", field: "name", }, { label: "Price", field: "price", }, { label: "Quantity", field: "quantity", }, ], } }, created() { axios .get("/project/api/list") .then((res) => { this.rows = res.data; }) } </script>

Quiero que cuando haga clic en el nombre samsung o iphone vaya a la página de detalles del producto.

Ruta detalle producto :

 export default [{ path: '/detail/product/:id', name: 'detail-product', component: () => import ('@/views/product/list.vue'), meta: { resource: 'PRODUCT', }, }, ]

Cualquier idea por favor ayúdame... Gracias.