[Vuejs]-How to show data in detail product?

To fetch the proper product in the detail view, use a computed property to find the entry in the products array:

export default {
  ...
  computed: {
    product() {
      let product = this.products.find(product => product.id === this.$route.params.id);
      return product;
    }
  },
  ...
}

To get the detail link to work, give a name to your /products/:id route, e.g. detail and use it with v-bind in router-link:

In the code:

export default new Router({
  routes: [
    ...
    {
      path: '/products/:id',
      name: 'detail',
      component: { Products }
    }
  ]
})

In the template:

<router-link v-bind:to="{ name: 'detail', params: { id: product.id } }" class="button is-small">Detail</router-link>