title: Vue-router is changing the url but not re-rendering the component
body: <p>First of all I've checked and history mode is turned on, I invoke <code>vue-router</code> like so:</p>
  <pre class="lang-js prettyprint-override"><code>const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: routes,
  });
  </code></pre>
  <p>The current route I am on is <code>/page/item/8</code>, and I am redirecting to <code>/page/item/9</code>. Currently the url changes but the page does not re-render leaving me on the same view I had before.</p>
  <p>This redirection is done like so:</p>
  <pre class="lang-js prettyprint-override"><code>this.$router.push({ name: 'PageItem', params: { itemId: '9' }}).catch(err =&gt; {
    // Stop Vue.router throwing an error if a user clicks on a notification with the same route.
    if (err.name !== 'NavigationDuplicated') {
      this.$logger.debug.log(err);
    }
  });
  </code></pre>
  <p>The route in question like so:</p>
  <pre class="lang-js prettyprint-override"><code>import PageWrapper from '@/layouts/PageWrapper';
      
  export default [
    {
      path: '/page',
      name: 'page',
      component: PageWrapper,
      children: [
        ... Other Routes ...
        {
          component: () =&gt; import(/* webpackChunkName: &quot;page-item&quot; */'@/pages/PageItem'),
          name:      'PageItem',
          path:      '/item/:itemId/:view?',
        },
      ],
    },
  ];
  </code></pre>
  <p>Any ideas, I've tweaked the code to remove identifying code so apologies if it looks a bit odd.</p>