Why components must come after defining router

[buckle2000]

I spent 1 hour on this problem.

This will work:

const Moon = window.Moon = require("moonjs");
const MoonRouter = window.MoonRouter = require("moon-router");
Moon.use(MoonRouter);
const router = new MoonRouter({
    default: "/",
    map: {
        "/": "Root",
        "/hello": "Hello",
    }
});
Moon.component("Root", {
    template: `<div>
      <h1>Welcome to "/"</h1>
      <router-link to="/hello">To /hello</router-link>
    </div>`
});
Moon.component("Hello", {
    template: `<div>
      <h1>You have Reached "/hello"</h1>
      <router-link to="/">Back Home</router-link>
    </div>`
});
const app = new Moon({
    el: '#app',
    router: router
})

This will break:

const Moon = window.Moon = require("moonjs");
const MoonRouter = window.MoonRouter = require("moon-router");
Moon.use(MoonRouter);
Moon.component("Root", {
    template: `<div>
      <h1>Welcome to "/"</h1>
      <router-link to="/hello">To /hello</router-link>
    </div>`
});
Moon.component("Hello", {
    template: `<div>
      <h1>You have Reached "/hello"</h1>
      <router-link to="/">Back Home</router-link>
    </div>`
});
const router = new MoonRouter({
    default: "/",
    map: {
        "/": "Root",
        "/hello": "Hello",
    }
});
const app = new Moon({
    el: '#app',
    router: router
})

Yeah I know it is documented but is there anyway to change this behavior?

[kbrsh]

Weird. Both cases should work. Can you provide a jsFiddle showing the problem?

[buckle2000]

Sorry, this turns out to be another problem.