Vue template

app.ts

import Vue from "vue"    
import Component from 'vue-class-component'

@Component({
  template: `<div>
  This is test {{message}}
  <p v-for="l in list">
  {{l}}
  </p>
  </div>`,
  props: [
    'message',
    'list'
  ]
})
class TestComponent extends Vue {
}
// https://stackoverflow.com/questions/43703180/what-is-the-tag-name-of-class-based-vue-component
Vue.component('test', TestComponent) // <= register as global component


@Component({
  template: `<div> 
  <p>Hi there! How have you been? {{name}}</p>
  <button @click="onClick">Update</button>
  <test message="hahahaha" :list="list"></test>
  </div>`
})
class MyComponent extends Vue {
  message: string = "Hi there"
  name: string = "Yiyi"
  list: string[] = ['a', 'b', 'c']

  onClick() {
    console.log('clicked')
    this.name += '1'
    this.list.push(Date.now()+'')
  }
}

new Vue({
  el: '#app',
  render: h => h(MyComponent)
})

console.log('enter here 123')

package.json

{
  "name": "vue_study",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "vue": "^2.4.2",
    "vue-class-component": "^5.0.2"
  },
  "devDependencies": {
    "@types/node": "^8.0.22",
    "ts-loader": "^2.3.2",
    "typescript": "^2.4.2",
    "webpack": "^3.5.5"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

tsconfig.json

{
  "include": [
    "./src/**/*"
  ],
  "compilerOptions": {
    "outDir": "./out",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "experimentalDecorators": true,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "allowJs": true,
    "watch": true
  }
}

webpack.config.js

module.exports = {
  devtool: 'inline-source-map',
  entry: './src/app.ts',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: ['.ts', '.tsx', '.js'], // note if using webpack 1 you'd also need a '' in the array as well
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },
  module: {
    loaders: [ // loaders will work with webpack 1 or 2; but will be renamed "rules" in future
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
}