<template>
  <div>
    <input v-model="msg">
    <!--<p>prop: {{propMessage}}</p>-->
    <p>msg: {{msg}}</p>
    <!--<p>helloMsg: {{helloMsg}}</p>-->
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import { test, createDec } from './decorator';

  @Component
  export default class App extends Vue {
    // initial data
    msg = 123

    // use prop values for initial data
//    helloMsg = 'Hello, ' + this.propMessage

    // lifecycle hook
    mounted() {
      this.greet()
    }

//    @test(123)
    @createDec
    created() {
      console.log('old created');
    }

    // computed
    get computedMsg() {
      return 'computed ' + this.msg
    }

    // method
    greet() {
      console.log('greeting: ' + this.msg)
    }
  }
</script>