Vue router not working with single file components with MeteorJS - meteor

Question

I am trying to get Vue working in MeteorJS with typescript and single file components. Sadly, it's not working. I believe it has something to do with App.vue not having a $route property set. Here's my startup.ts file. It creates a div and mounts the main app:
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import App from "../imports/App.vue"
//create div to mount app
var appDiv = document.createElement("div")
appDiv.id = "app"
document.body.appendChild(appDiv)
//mount app
var AppVue = Vue.extend(App)
var mainApp = new AppVue();
mainApp.$mount("#app")
App.vue is dead simple:
<template>
<div>
<router-view class="view"></router-view>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import router from "./startup/router";
import LoginPage from "./client/users/pages/LoginPage/LoginPage.vue"
export default new Vue({
router: new VueRouter({
routes: [{
name: "Login",
path: "/login",
component: new Vue({
render: function (createElement) {
return createElement("p", "Login")
}
})
}]
})
})
</script>
MeteorJS uses commonJS, so I had to use allowSyntheticDefaultImports and esModuleInterop to get it working. I don't know if this causes problems. Here is my tsconfig.
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"sourceMap": true
}
}
It gives me this error:
"TypeError: Cannot read property 'matched' of undefined"
Looking through the code shows me that it runs into this error when attempting to render the . The specific code attempts to get parent.$route, where parent is the App component. However, for some reason App doesn't have any $route property! If anyone knows how to fix this it would be much appreciated.

Answer 1

Well, looks like the problem was in my tsconfig. esModuleInterop should be true, but allowSyntheticDefaultImports should be false.
Next, mounting the component directly doesn't work - should have realized that. This worked:
var myApp = new Vue({
el: "#app",
render: h => h(App),
router: new VueRouter({
routes: routes
})
})
The thing is I still have the <router-view> in the App component. I just moved the actual router to the parent Vue instance.