vue-class-component

<template>
  <div>
    <button v-on:click="decrement">-</button>
    {{ count }}
    <button v-on:click="increment">+</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

// Define the component in class-style
@Component
export default class Counter extends Vue {
  // Class properties will be component data
  count = 0

  // Methods will be component methods
  increment() {
    this.count++
  }

  decrement() {
    this.count--
  }
}
</script>

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

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  count = 0;

  increment() {
    this.count++;
  }

  get twiceTheCounter() {
    return this.count * 2;
  }

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

  // Declare render function
  render() {
    return (
      <div>
        <div>{this.msg}</div>
        <p>You clicked {this.count} times</p>
        <p>{this.twiceTheCounter}</p>
        <button onClick={this.increment}>Click me</button>
      </div>)
  }
}
</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>