Vue, subroutes reverse order

I wrote a small route with Vue.js router with a nested subroute, I expected (and it works) as an output:

• Load data from Main (1)
• Load data from Sub (2)

however when I hit the refresh button on the browser the order reverse itself to:

• Load data from Sub (2)
• Load data from Main (1)

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <a v-link="{ path: '/' }">Go main route</a>
    <a v-link="{ path: '/bar' }">Go to subroute</a>
  </p>
  <router-view></router-view>
</div>

var Main = Vue.extend({
  template:
    '<div class="foo">' +
      '<h2>This is Main!</h2>' +
      '<router-view></router-view>' +
    '</div>',
  ready: function() {
    console.log('Load data from Main (1)');
  }
})

var Sub = Vue.extend({
    template: '<p>This is sub!</p>',
    ready: function() {
        console.log('Load data from Sub (2)');
    }
})

// configure router
var router = new VueRouter()

router.map({
  '/': {
    component: Main,
    subRoutes: {
      '/bar': {
        component: Sub
      }
    }
  }
})

// start app
var App = Vue.extend({})
router.start(App, '#app')

You can see a working copy at http://jsfiddle.net/L6tuweue/ just hit the reload button over the display section and keep your console open.

What am I doing wrong?

Thanks.