Updating the product details when switching URLs

 While navigating through the different product URLs to check variations, you may have noticed that clicking back and forward doesn't update the product data on the page.

This is because Vue-router realizes the same component is being used between the pages, and so, rather than destroying and creating a new instance, it reuses the component. The downside to this is that the data does not get updated; we need to trigger a function to include the new product data. The upside is that the code is more efficient.

To tell Vue to retrieve the new data, we need to create a watch function; instead of watching a variable, we are going to watch the $route variable. When this gets updated, we can load new data. 

Create a new variable in the data instance of slug, and set the default to be the route parameter. Update the product computed function to use this variable instead of the route:

const ProductPage = {
  name: 'ProductPage',

  template: `...`,

 ...