Vue.extend shows error for imported components

[derrabauke]

When I use Vue.extend() to enable typechecking in Vue SFCs the linter complains about unknown types in VueConstructor type.

<script lang="ts">
import Vue from "vue"

import SideBar from "@/components/SideBar.vue"
import TopBar from "@/components/TopBar.vue"

export default Vue.extend({
  components: {
    SideBar: SideBar,
    TopBar: TopBar
  }
})
</script>

Argument of type '{ components: { SideBar: VueConstructor<Vue>; TopBar: VueConstructor<Vue>; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.
  Type '{ components: { SideBar: VueConstructor<Vue>; TopBar: VueConstructor<Vue>; }; }' is not assignable to type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'.
    Types of property 'components' are incompatible.
      Type '{ SideBar: VueConstructor<Vue>; TopBar: VueConstructor<Vue>; }' is not assignable to type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | Co...'.
        Type '{ SideBar: VueConstructor<Vue>; TopBar: VueConstructor<Vue>; }' is not assignable to type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | Co...'.
          Property 'SideBar' is incompatible with index signature.
            Type 'VueConstructor<Vue>' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<ne...'.
              Type 'VueConstructor<Vue>' is not assignable to type 'AsyncComponentFactory<any, any, any, any>'.
                Type 'VueConstructor<Vue>' provides no match for the signature '(): { component: AsyncComponentPromise<any, any, any, any>; loading?: VueConstructor<Vue> | FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>> | ComponentOptions<never, DefaultData<never>, DefaultMethods<never>, DefaultComputed, Record<string, any>, Record<string, any>> | EsModuleComponent | undefined; error?: VueConstructor<Vue> | FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>> | ComponentOptions<never, DefaultData<never>, DefaultMethods<never>, DefaultComputed, Record<string, any>, Record<string, any>> | EsModuleComponent | undefined; delay?: number | undefined; timeout?: number | undefined; }'.

To bypass this error I will write the follwing and the linting error disappears.
Using VIM with tslint doesn´t produce the original error at all.

<script lang="ts">
import Vue, { VueConstructor } from "vue"

import SideBar from "@/components/SideBar.vue"
import TopBar from "@/components/TopBar.vue"

export default Vue.extend({
  components: {
    SideBar: SideBar as VueConstructor,
    TopBar: TopBar as VueConstructor,
  }
})
</script>

Is this an issue with the Linter-Plugin or am I missing something?
Edit: I´m writing here and not vuejs/vetur cause I have seen this issue.

[derrabauke]

The issue resolved after the last VSC update. 🥳