Why do I see a previous route component when using vue router 3 navigation?

Question

Let's say we have 3 routes and for the sake of making it simple, they're just referred to as 1, 2, and 3.

When I navigate to route 1 -> route 2 -> route 3 -> route 1, route 2 shows between the navigation from route 3 -> route 1. I can't for the life of me figure out why that's happening.

Routes file is like:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Route1 from '../views/Route1';
import Route2 from '../views/Route2';
import Route3 from '../views/Route3';

Vue.use(VueRouter);

const routes = [
  {
    path: '/route1',
    name: 'Route1',
    component: Route1
  },
  {
    path: '/route2',
    name: 'Route2',
    component: Route2
  },
  {
    path: '/route3',
    name: 'Route3',
    component: Route3
  }
];

const router = new VueRouter({
  mode: 'history',
  base: '/',
  query: {
    t: window.token
  },
  routes
});

export default router;

main.js

import 'sass/main.scss';

import moment from 'moment';
import Vue from 'vue';

import { mapActions, mapState } from 'vuex';
import App from './App.vue';
import api from './plugins/api.js';
import vuetify from './plugins/vuetify';
import router from './router';
import store from './store';

Vue.prototype.$moment = moment;

Vue.use(api);

Vue.config.productionTip = false;

new Vue({
  computed: {
    ...mapState
  },
  methods: {
    ...mapActions
  },
  router,
  store,
  vuetify,
  watch: {
    $route() {
      try {
        // ... some action(s) on route change - removed here
      } catch (error) {
        // ... error handling removed
      }
    }
  },
  render: h => h(App)
}).$mount('#app');

App.vue

<template>
  <v-app>
    <!-- header/app bar removed here -->
    <v-main>
      <v-progress-linear
        v-if="loading"
        color="primary lighten-2"
        height="2"
        indeterminate
      />
      <router-view v-else />
    </v-main>
    <!-- footer removed here -->
  </v-app>
</template>

Answer 1

Kind of dumb, but I'll put it out there anyway. My components were rendering dynamic components that were in the store... upon navigating to a new route I just had to clear the stored component array while the new component array was fetched from the API. So when going back to another route it was first seeing a flash of the old array of dynamic componets.