TypeError: this._routerRoot is undefined

[kerolloz]

example github repository: https://github.com/kerolloz/vue-class-component-bug

[Vue warn]: Error in data(): "TypeError: this._routerRoot is undefined"

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Path: {{ currentPath }}</p>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

@Component
export default class HelloWorld extends Vue {
  // data() {
  //   return {
  //     title: "Bug",
  //     currentPath: this.$route.path,
  //   };
  // }
  title = "Bug";
  currentPath = this.$route.path;
}
</script>

[ktsn]

Because we don't forward private properties when initializing this value in property initializers. We can just allow such properties to make it work.
https://github.com/vuejs/vue-class-component/blob/master/src/data.ts#L20

[kerolloz]

Thank you @ktsn for making that clear. I didn't see any notice in the README or documentation page about not binding the private properties of Vue components to the class. I tried some workarounds like defining currentPath as a computed property

@Component
export default class HelloWorld extends Vue {
  title = "Bug";
  get currentPath() { return this.$route.path }
}

or using the old-style data() method as the commented part in the code. But I believe that neither is a good workaround.

are there any PRs coming to fix this or should I get started making one?

---

Because we don't forward private properties when initializing this value in property initializers

out of curiosity: Is this a design decision for vue-class-component? or what?