Maybe @Prop don't support ES file.

This is the example code.

<!-- Component: vSidebar.vue -->
<template>
  <aside class="vSidebar">
    {{test}}
  </aside>
</template>

<script>
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
class vSidebar extends Vue {
  @Prop()
  test;

  mounted() {
    console.log(this)
  }
}

export default vSidebar;
</script>

<!-- Parent: App.vue -->
<template>
  <div class="App">
    <template v-if="user">
      <v-header />
      <v-sidebar :test="test" />
    </template>
  </div>
</template>

<script>
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
class App extends Vue {
  test = '123'

  get user() {
    return this.$store.state.user.loginUser;
  }

  @Watch('user')
  onUserChange() {
    if(this.user) {
      this.$router.push('dashboard');
    } else {
      this.$router.push('signin');
    }
  }
}

export default App;
</script>

I’m sure @Watch is working, but @Prop not. I got vue.esm.js:571 [Vue warn]: Property or method "test" is not defined on the instance but referenced during render. and this.test in vSidebar is undefined when mounted hook emitted. If I use @Component({props}), it works.

[kaorun343]

Hi, everyone.

I apologize you for late reply.

I also mentioned this problem and what I found is that when target (TypeScript’s target) is ES2015 it works well, but when ES5, it doesn’t.

[kaorun343]

@Emiya0306

Hi.

https://github.com/Microsoft/TypeScript/pull/20075

Here’s the reason why the exclamation mark is needed. The feature is introduced since TS 2.7.