How to use the vue-class-component.registerHooks function in vue-class-component

import Vue from "vue"
import Component from "vue-class-component"
import Router from "vue-router"

Vue.use(Router)

// you have to register the hooks before component definition
Component.registerHooks(["beforeRouteEnter", "beforeRouteUpdate", "beforeRouteLeave", "beforeRouteLeave"])

export default new Router({
  routes: [
    {
      path: "/",
      redirect: "/project/prerequisites"
    },
    {
      path: "/project",
      redirect: "/project/prerequisites",
      component: () => import(/* webpackMode: "eager" */ "./components/project.vue"),
      children: [
        {
          path: "prerequisites",
          component: () => import(/* webpackChunkName: "project" */ "./components/prerequisites.vue")
        },

// class-component-hooks.js
import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate' // for vue-router 2.2+
])

/// 

import Vue from 'vue';
import Component, { mixins, createDecorator } from 'vue-class-component';

export { Vue, Component, mixins, createDecorator };
export * from 'vue-property-decorator';
export * from 'vuex-class';

Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteUpdate',
  'beforeRouteLeave',
  'asyncData',
  'head',
  'middlewares',
]);

Vue.use(mixins);

// use dayjs
import date from './plugins/date';
Vue.use(date);

// use markdown-it
import markdown from './plugins/markdown';
Vue.use(markdown);

// use nprogress
import nprogress from './plugins/nprogress';
Vue.use(nprogress);

// register hooks
Components.registerHooks([
  'fetch',
]);

import Component from 'vue-class-component';

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate' // for vue-router 2.2+
]);

import Vue, { PropOptions, WatchOptions } from "vue"
import {
  /*Component,*/ Emit,
  Inject,
  InjectReactive,
  Model,
  Prop,
  PropSync,
  Provide,
  ProvideReactive,
  Ref,
  Watch /*, Vue, Mixins */
} from "vue-property-decorator"
import Component, { createDecorator, mixins } from "vue-class-component"

Component.registerHooks([
  "beforeRouteEnter",
  "beforeRouteUpdate",
  "beforeRouteLeave",
  "asyncData",
  "fetch",
  "head",
  "key",
  "layout",
  "loading",
  "middleware",
  "scrollToTop",
  "transition",
  "validate",
  "watchQuery",
  "meta"
])

import Vue from 'vue'
import * as ElementUi from 'element-ui'
import VueSimplemde from 'vue-simplemde'
import Component from 'vue-class-component'
import 'simplemde/dist/simplemde.min.css'
import 'highlight.js/styles/atom-one-dark.css'
import hljs from 'highlight.js'
(window as any).hljs = hljs

import App from './layout/App.vue'
import router from './router/index'
import store from './store'
import './assets/scss/index.scss'
import { format } from './filters/index'

Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate'
])

Vue.use(ElementUi)
Vue.use(VueSimplemde)

Vue.filter('format', format)

Vue.config.productionTip = false


const app: Vue = new Vue({
  el: '#app',
  router,

import Component, { mixins } from 'vue-class-component'
import { State, Getter, Action, Mutation, namespace } from 'vuex-class'

Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'asyncData',
  'fetch',
  'head',
  'middleware',
  'layout',
  'transition',
  'scrollToTop',
  'validate'
])

export { Component as default, mixins, State, Getter, Action, Mutation, namespace }