I am making list page in vuejs. And now I'm having some problems as follows:

<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>

I want when I click on the name samsung or iphone it will go to that product detail page.

Route detail product :

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

Any ideas please help me..Thanks.