Vue 3 and Typescript "Property does not exist on type" error with augmented ComponentCustomProperties and data key on component.

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: macOS
• Vetur version: v0.28.0
• VS Code version: 1.50.0

Problem

This is my vue-shims.d.ts where I add the type for a global property I’ve added.

import { ComponentCustomProperties } from "vue";
import { CONSTANTS } from "@constants";

declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $const: typeof CONSTANTS;
  }
}

This works fine until I add a data option to my component, see screen shots of with and without:

When I add the data option, Vetur thinks $const does not exist on “this”, as if what’s in data overwrites my augmented ComponentCustomProperties.

Typescript is still getting the type inference as you can see from the cropped off bit of the image with the error so I think this is just a vetur issue.

Reproducible Case

[catherineluse]

In my case I needed this in my tsconfig.json:

"noImplicitThis": false,

[nrgnrg]

Sure I’ll do that asap.

I’ve found a workaround for now, annotating return type of the computed property removed the error but threw a line 0 “cannot read property ‘map’ of undefined” in eslint. Upgraded @typescript-eslint/eslint-plugin and @typescript-eslint/parser to the latest version but I had to disable the @typescript-eslint/camelcase rule. It seems to have fixed the issue.