Data properties not found and/or incorrectly typed in TypeScript 3.6.2

Version

2.6.10

Reproduction link

https://jsfiddle.net/keegan_openbay/nhvemx32/ (be aware that JSFiddle does not show TypeScript compiler errors)

Steps to reproduce

• use TypeScript >= 3.6.1-beta (currently stable at 3.6.2)
• have at least one prop
• correctly type all your methods
• use a non-string data property in your component options

What is expected?

Normal behavior; the data property is correctly typed and found on the instance.

What is actually happening?

Errors arise because:

• in methods, the data properties are not found on the component type.
• in watch, the data properties are typed string | WatchOptionsWithHandler<any> | WatchHandler<any>.
• in computed, the data properties are typed (() => any) | ComputedOptions<any>.

---

[ktsn]

I’ve filed it on TypeScript repo. https://github.com/microsoft/TypeScript/issues/33164

[dasDaniel]

I’m still seeing this with TypeScript 4.5.5 on vue 2.6.14

my workaround is to use (this as Vue) instead of this

for example

watch:{
  myVar(){
    (this as Vue).myMethod()
  }
}

with a component definition (in the same file) like:

declare module "vue/types/vue" {
  interface Vue {
    myMethod: () => void
  }
}