vue-router not rendering new components on route change

Question

I have a really simple minimal example page with vue-router which is only partially working.

app.js

import 'babel-polyfill';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';
import router from './router'

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

app.vue

<template>
  <div class="container">
        <div id="nav">
          <router-link to="/">Page 1</router-link>|
          <router-link to="/page2">Page 2</router-link>
          <router-link to="/sretbs">No page</router-link>
        </div>
        <div style="border:5px solid green">
          <router-view></router-view>
        </div>
  </div>
</template>

<script>
export default {};
</script>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from './page1.vue';
import Page2 from './page2.vue';
import ErrorPage from './error.vue';

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/page1', name: 'page1', component: Page1 },
    { path: '/page2', name: 'page2', component: Page2 },
    { path: '*', component: ErrorPage }
  ],
  redirect: {
    "/": "page1"
  }
})

The <router-view> appear to work on first page load. It shows the component I expect for whatever route is currently in the url (e.g. localhost/test#/page2), or if I explicitly route.push before binding Vue to #app it also shows the expected component.

Navigating to other routes doesn't appear to fully work, or at least it's not rendering the new route. When I add debug output to the page components like so:

<template>
  <div class="container">
    <h2>this is page 2</h2>
    <buttons></buttons>
  </div>
</template>

<script>
export default {
  beforeRouteEnter: function(to, from, next) {
    console.log(`Entering page 2:`);
    next();
  },
  beforeRouteLeave: function(to, from, next) {
    console.log(`Leaving page 2`);
    next();
  },
  beforeRouteUpdate: function() {
    console.log(`Before route update`);
  }
};
</script>

it is picking up the routeenter/leave events. I can seemingly navigate back and forth between routes, but you don't see the result until a page reload

I can't recreate the problem in a jsfiddle, and I've scrapped everything and started again but am getting the same result. I can't see anything I'm doing wrong from looking at the Vue Router documentation. Any idea what I'm missing here?

Answer 1

In this instance the answer was painfully simple. There was another Vue instance on the page elsewhere. Even though my understanding is separate Vue instances bound to different container elements should be able to exist in harmony, in this instance it wasn't. It was also what was breaking the Vue dev tools, showing a Vuex instance for example but not showing any of the loaded components and giving a Cannot read property '__VUE_DEVTOOLS_UID__' of undefined error in the Vue Dev Tools errors.