[3.0.0-alpha.9] Options API + TypeScript. Property does not exist on type CreateComponentPublicInstance

[punyflash]

When using options API:

export default defineComponent({
    data() {
        return {
            edit: this.$route.params?.id
        }
    },
    metaInfo() {
        return {
            title: this.edit ? 'Edit product' : 'Create product'
        }
    }
})

TypeScript throws errors:

TS2339: Property 'edit' does not exist on type 'CreateComponentPublicInstance<{ [x: string & `on${string}`]: (...args: any[]) => any; } | { [x: string & `on${string}`]: (...args: any[]) => any; }, {}, {}, {}, {}, DefineComponent<{}, {}, {}, {}, { getCategories(query?: any): Promise<AxiosResponse<any, any>>; ... 5 more ...; selectNormalizer: (category: any) => any...'.
  Property 'edit' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: (Readonly<{} & {} & {}> & ({ [x: string & `on${string}`]: (...args: any[]) => any; } | { [x: string & `on${string}`]: (...args: any[]) => any; })) & ({ ...; } | { ...; }); ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...>):...'.

P.S. Code itself works well, this is only typescript issue. And to be honest I'm not sure it's because of library, the issue could be related to vue 3 core.

[luckydonald]

Oh, that regression will be a deal breaker for our efforts of migrating a project to vue 3 for now.

[luckydonald]

I did read about getCurrentInstance(…) though, in the context of $router, maybe that'll help?

import { getCurrentInstance } from 'vue'

export default {
  setup () {
    const { ctx } = getCurrentInstance()
    console.log(ctx.$router.currentRoute.value)
  }

Edit:

The docs don't like that use-case, though: https://v3.vuejs.org/api/composition-api.html#getcurrentinstance

⚠️ Do NOT use it as an escape hatch to get the equivalent of this in Composition API.

And

getCurrentInstance only works during setup or Lifecycle Hooks

[stale[bot]]

Thanks for your contribution to vue-meta! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of vue-meta
2. Comment the steps to reproduce it Issues that are labeled as pending will not be automatically marked as stale.

[punyflash]

Still can reproduce

[MCFreddie777]

Reproduced here ✋

[punyflash]

This fix still relevant https://github.com/nuxt/vue-meta/pull/736

[lorddexon]

In my case it was fixed (using typescript as well) when I set manually type of computed property, like this:

isProceedBtnActive (): boolean {
      return this.error.status
}

Withous ": boolean" it shows an error. Strange behavior

[punyflash]

In my case it was fixed (using typescript as well) when I set manually type of computed property, like this:

isProceedBtnActive (): boolean {
      return this.error.status
}

Withous ": boolean" it shows an error. Strange behavior

This is not a computed property but a custom hook, your issue was not relevant to this one.

[lorddexon]

This is not a computed property but a custom hook, your issue was not relevant to this one.

I mean, you probably may need to set the type of edit in data explicitly

data() {
        return {
            edit: this.$route.params?.id as string | number
        }
},

[punyflash]

This is not a computed property but a custom hook, your issue was not relevant to this one.

I mean, you probably may need to set the type of edit in data explicitly

data() {
        return {
            edit: this.$route.params?.id as string | number
        }
},

The issue is in metaInfo this scope, all is ok with component state. And it was fixed by me in #736, however seems like project is abandoned so it was just ignored.