Vue.js Component options

I wanted to collect in one place, what are all the script options that I could use within a Vue Component.

Source documentation:

• Vue.js API documentation
• Vue.js Guide
• Vue.js repo

Let's go with a component template first:

.....
<template>
  <div></div>
</template>

<script>
export default {

  // Options -- Data
  data() {},
  props: {},
  computed: {},
  methods: {},
  watch: {},

  // Options -- Lifecycle Hooks
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},

  // Options -- Assets
  directives: {
    // custom directives
  },
  filters: {},
  components: {},

  // Options -- Misc
  name: "", // only to be used as component option.
  model: { prop: "", event: ""},
}
</script>

<style>
</style>
....

There are some more options that are not available on Component templates:

.....
new Vue({
  el: '#some-element',
  template: '<div v-show="someChildProperty">Child</div>',
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name
      this.$slots.default // array of children
    )
  }
})
....