Props are broken with default project creation

[LifeIsStrange]

Steps to reproduce this critical bug:

1. create a project with vue-ui (vue 3, Typescript)
2. yarn add [email protected]
3. use it

so we have the two following basic components:
parent Component:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <Wtf msg="Welcome to Your Vue.js + TypeScript App" />
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import Wtf from "./components/Wtf.vue";

@Options({
  components: {
    Wtf
  }
})
export default class App extends Vue {}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Child component

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

class Props {
  msg!: string;
}

export default class Wtf extends Vue.props(Props) {
  mounted() {
    console.log(this.msg);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

when running yarn serve the prop msg printed in mounted is undefined and we have the following warning

[Vue warn]: Property "msg" was accessed during render but is not defined on instance. 
  at <Wtf msg="Welcome to Your Vue.js + TypeScript App" > 
  at <App>
undefined

notice that even we replace

class Props {
  msg!: string;
}

by

class Props {
  msg = " ";
}

then its working fine

I have a vue3 vue class component typescript project that use Ionic and it has not such an issue despite using the same vue-class-component beta release.

I've made the following reproducer
https://github.com/LifeIsStrange/vue-class-component-with-vue3-props-bug-reproducer

@ktsn

[ktsn]

#465

You need to specify "useDefineForClassFields": true for TypeScript compiler option to let Vue Class Component aware of the properties without initializer