Why async component doesn't change when the route update? - vue.js

Question

I'm using async components in my code on CodeSandbox (seen below). When I click on goto product-2 after goto product-1, nothing happens. I expected the <product-item> component to change based on the clicked component, but only the URL changes. I even have a beforeRouteUpdate hook function. How do I fix this?
// main.js
import Vue from "vue";
import App from "./App.vue";
import VueRouter from 'vue-router';
import ProductPage from './product-page.vue';
Vue.use(VueRouter);
Vue.config.productionTip = false;
const routes = [
{ path: '/:productId', component: ProductPage },
]
const router = new VueRouter({
routes // short for `routes: routes`
})
new Vue({
router,
render: h => h(App)
}).$mount("#app");
// App.vue
<template>
<div id="app">
<router-link to="/product-1">goto product1</router-link>
<br>
<br>
<router-link to="/product-2">goto product2</router-link>
<div>Router view:</div>
<router-view :key="$route.params.productId"></router-view>
</div>
</template>
// product-page.vue
<template>
<div>
<product-item></product-item>
</div>
</template>
<script>
export default {
name: "product-page",
components: {
ProductItem: () => ({
component: import("./product-item.vue"),
loading: { template: "<div>loading....</div>" }
})
}
};
</script>
<template>
<div>
product item: {{product}}
</div>
</template>
<script>
export default {
name: "ProductItem",
mounted: function () {
this.product = this.$route.params.productId;
},
beforeRouteUpdate: function(to, from, next) {
this.product = to.params.productId;
next();
},
data: function () {
return {
product: null
}
},
};
</script>

Answer 1

The problem is the route path (i.e., /:productId) does not actually change between the links for /product-1 and /product-2 (even though the parameter values do), so router-view does not re-render.
The workaround is to key the router-view based on the productId parameter:
<router-view :key="$route.params.productId" />