vue js router tidak mengload component

kenapa ya component saya tidak terload dan saya cek di console.log tidak ada apa apa dan di network juga tidak terdapat respon apapun. tetapi ketika saya mengclick tombol show ini link urlnya berubah sesuai dengan router-linknya hanya saja componentnya tidak terload

ini pada prodcut_index.vue :

 <router-link :to="{ name:'productshow', params: {productColorId:product.product_color_id} }">SHOW</router-link>

ini pada app.js

 require('./bootstrap');

window.Vue = require('vue');
window.VueRouter = require('vue-router').default;
window.VueAxios = require('vue-axios').default;
window.Axios = require('axios').default;
// import {routes} from './routes';
const ProductOptionCreate = Vue.component('po-create',require('./components/products/ProductOption_create.vue'));
const ProgressModal = Vue.component('vue-modal',require('./components/ProgressModal.vue'));
const ProductIndex = Vue.component('product-list',require('./components/products/Product_index.vue'));
const productshow = Vue.component('productshow',require('./components/products/ProductOption_show.vue'));
Vue.use(VueRouter,VueAxios,axios);

// Vue.component('example-component', require('./components/ExampleComponent.vue'));
const routes = [
  {
    path:'/admin/product/',
    name:'product-list',
    component:ProductIndex,
    props: true
  },
  {
    path:'/admin/productOption/:productColorId',
    name:'productshow',
    component:productshow
  }
];

const router = new VueRouter({
  routes,
  mode:'history'
});

const app = new Vue({
  el:'#app',
   router: router
});

dan ini pada ProductOption_show.vue:

 <template>
  <p>asxxxd</p>
</template>

<script>
    export default {
      name:'productshow',
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>