vue-router typescript integration fails

MyComponent.ts

import Vue from 'vue';
import Component from 'vue-class-component';

@Component({
  name : 'component'
})
export default class MyComponent extends Vue {

  beforeCreate() {
    console.log('entering Bootstrap#beforeCreate');
  }

  created() {
    console.log('entering Bootstrap#created');
  }

  activated() {
    console.log('entering Bootstrap#activated');
  }

  beforeRouteEnter(to, from, next) {
    console.log('entering Bootstrap#beforeRouteEnter');
    next();
  }

  beforeRouteUpdate(to, from, next) {
    console.log('entering Bootstrap#beforeRouteUpdate');
    next();
  }
}

MyComponent.vue

<template>
  <div>Guards are never called...</div>
</template>

<script lang="ts">
  import MyComponent from './MyComponent';
  export default MyComponent;
</script>

register-hooks.ts

import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate' // for vue-router 2.2+
]);

router.ts

import Vue from 'vue';
import VueRouter from 'vue-router';
import Component from 'vue-class-component'
import './register-hooks'

import MyComponent from './MyComponent.vue';

Vue.use(VueRouter)

export default new VueRouter({
  mode : 'history',
  routes : [
    { path: '/', component: MyComponent, meta : { title: 'Default Wiki Page'}},
  ]
});

Hi!, I have the same problem, but Is it required to have the component (MyComponent.ts) in another file?, and then import in "MyComponent.vue" file? I could not make it work.

No, I just made use of the ability to separate the code from the actual template.