Vue and vue-property-decorator. TS error in beforeRouteUpdate hook

Question

I'm writing application using Vue 2/typescript and vue-property-decorator. In my component I use beforeRouteEnter/beforeRouteUpdate hooks. My component has method findProjects, and I want to invoke this method in my beforeRouteUpdate hook.

My component:

import { Component, Vue, Mixins, Watch } from 'vue-property-decorator'
...
export default class ProjectSandboxTs extends Mixins(GlobalFilterMixin({})) {
  created() {...
  }

  clearInput() {...
  }

  findProjects() {
    const filter: IFilter = { ...this.modalFilterValues, ...this.filterValues }
    this.filterProjects(filter)
    this.displayProjects()
    this.isEmpty = this.filteredData.length === 0
  }

  filterProjects(filter: IFilter) {...
  }

But when I try to invoke component's method in my hook, I get typescript error: Property 'findProjects' does not exist on type 'Vue'

beforeRouteUpdate(to, from, next) {
  if (!isEqual(to.query, from.query)) {
    this.findProjects() // <== Property 'findProjects' does not exist on type 'Vue'
  }
  next()
}

Any ideas how to fix it?

Answer 1

It is because typescript doesn't know what type of instance this is going to be. Try something like this:

(this as ProjectSandboxTs).findProjects()