Vue component with common own and vue-router life cycle hooks

allhooks.vue

<template><h1>It works</h1></template>
<script>
export default {
  name: 'MyComponent',
  beforeRouteEnter(to, from, next) {
    console.debug('beforeRouteEnter: ', to)
    
    // no `this` available here
    next((vm) => { 
      vm.dummyField = 'dummyValue'
    })
  },
  beforeRouteUpdate(to, from, next) {
    console.debug('beforeRouteUpdate: ', to)
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.debug('beforeRouteLeave: from', from, 'to', to)
    next()
  },
  activated() {
    console.debug('activated', this.$vnode.tag)
  },
  deactivated() {
    console.debug('deactivated', this.$vnode.tag)
  },
  created() {
    console.debug('created', this.$vnode.tag)
  },
  mounted() {
    console.debug('mounted', this.$vnode.tag)
  },
  destroyed() {
    console.debug('destroyed')
  }
}
</script>