vue decorator using 'vue-class-component'

App.vue

<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>

vue-decorator.js

import { createDecorator } from 'vue-class-component';

export function test(id) {
  console.log('evaluated', id);
  return (target, property, descriptor) => {
    console.log('===');
    console.log(target, property, descriptor);
    console.log('executed', id);
  }
}

export const createDec = createDecorator((options, key) => {
  // component options should be passed to the callback
  // and update for the options object affect the component
  options.foo = 'bar';
  const originalCreated = options.created;
  options.created = function () {
    console.log('new created');
    originalCreated.apply(this);
  };
  console.log(options, key, '===');
})