new Vue({
  el: '#app',

  data: {
    text: 'Vue.js is awesome'
  },

  computed: {
    upperText() {
      return this.text.toUpperCase()
    }
  }
})

<div id="#app">
  {{ upperText }}
</div>

new Vue({
  el: '#app',

  data: {
    text: 'hello'
  },

  watch: {
    text(newValue, oldValue) {
      // this.text が変わったときに実行される
    }
  }
})

new Vue({
  // ...

  watch: {
    text: {
      handler(newValue, oldValue) {
        // this.text が変わったときに実行される
      },
      immediate: true, // 初期値設定時にも実行されるようにする
      deep: true // オブジェクトの子孫も監視する 
    }
  }
})

// 文字列
vm.$watch('a.b.c', function (newVal, oldVal) {
  // vm.a.b.c が変更されたら実行される
})

// 関数
vm.$watch(
  function () {
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // this.a + this.b の値が変わったら実行される
  }
)

Vue.component('v-button', {
  template: `...`,
  
  props: { /* ... */ },
  
  // ... インスタンスオプションと同様 ...
}

const VButton = {
  template: `...`,
  
  props: { /* ... */ },
  
  // ... インスタンスオプションと同様 ...
}

// 他のコンポーネント
const AnotherComp = {
  // VButton を登録
  components: { VButton }
}

Vue.component('v-button', {
  props: {
    // theme プロパティを定義
    // `this.theme` で参照できる
    theme: {
      type: String,
      default: null
    }
  },
  
  // ... インスタンスオプションと同様 ...
})

<!-- theme に 'blue' を渡す -->
<v-button theme="blue" />

Vue.component('v-button', {
  methods: {
    onClick () {
      // `click` イベントを送出
      this.$emit('click')
    }
  }
  
  // ... インスタンスオプションと同様 ...
})

<!-- クリックを監視 -->
<v-button 
  v-on:click="onClickButton" 
/>

Vue.component('v-button', {
  // 一部省略
  template: `<button> 
    <span>
      <slot />
    </span>
  </button>`
  
  // ... インスタンスオプションと同様 ...
})

<!-- 小要素が slot と差し替わる -->
<v-button>
  ボタンテキスト
</v-button>

Vue.component('v-button', {
  // 初期データを返す関数
  data() {
    return {
      localData: 'hoge'
    }
  }
})

<template>
  <!-- コンポーネントのテンプレート -->
</template>

<script>
// コンポーネントオプション
export default {
  data () { /* ... */ }
}
</script>

<style>
/*  コンポーネントのスタイル */
</style>

<template lang="pug">
  //- Pug
  button.button(type="button")
    slot
</template>

<script lang="ts">
// TypeScript
import Vue from 'vue'
export default Vue.extend({
  data () { /* ... */ }
})
</script>

<style lang="scss">
/* SCSS */
.button {
  &_text {
  }
}
</style>

<template>
  <button class="button">
    <slot />
  </button>
</template>

<style scoped>
/* このコンポーネントにのみ適用 */
.button {
  background-color: blue;
}
</style>