[Vue + Typescript] Property does not exist on type 'Function'.

[soorajsprakash]

Vue version

3.2.47

Link to minimal reproduction

https://play.vuejs.org/#eNptkLFqwzAQhl/lx4sTCE67GjdQuha6dIs6iPjSiMonYZ9Di9C7V3Lj2kMW6T7p+4/jQvHsfXUdqaiLZjj1xgus5s8nVcigioNi03nXCwJaOhumF5eYiQUR5951KFO4VKyYvicxaXq0073WN0Ex0GrRmy2mGuhJxp5nAjoSnY16eQKcF+N4qHFc3oDAuqMa5bvjn3KHq7ZjRskYd/fMV/dlVqbNGBfxYy6X9ECWTkLtG6eAXMxQzQNWt6GOD7fY1CgdcZsLxc3+b5dpfwmEOm+1UCKguTweQlg3r/KEiLHZp6+c/feL+AtUe4Zu

Steps to reproduce

In options api, with defineComponent define data properties, and in the same properties, try to access other data properties. It will throw error saying:

Property "options" doesn't exist on type 'Function'.

Here is the code:

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      metadata: {
        options: [
          {name: 'Tony', value: 'tony'},
          {name: 'Loki', value: 'loki'}
        ]
      },
      selectedOne: this.metadata.options[0]
    }
  }
})

</script>

<template>
  <h1>{{ selectedOne.name }}</h1>
</template>

What is expected?

No error is expected

What is actually happening?

Property "options" doesn't exist on type 'Function'. => this error is coming

System Info

System:
    OS: Linux 6.2 Ubuntu 23.04 23.04 (Lunar Lobster)
    CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400 @ 2.60GHz
    Memory: 8.65 GB / 15.40 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm
  Browsers:
    Firefox: 112.0.1
  npmPackages:
    vue: ^3.2.47 => 3.2.47 

[yangxiuxiu1115]

This is an expected outcome. It can't be considered a bug.

[soorajsprakash]

@RicardoErii Ohh, my bad. But then, as in this example, how can i get the expected outcome?

As in, set another data property "selectedOne" as "this.metadata.options[0]"?

[yangxiuxiu1115]

Maybe you can use it this way.

export default defineComponent({
  data() {
    const metadata = {
        options: [
          {name: 'Tony', value: 'tony'},
          {name: 'Loki', value: 'loki'}
        ]
      }
    return {
      metadata,
      selectedOne: metadata.options[0]
    }
  }
})

[soorajsprakash]

Ok thnx @RicardoErii , will try this out. But if i want to access those properties, from outside, say from the template, how can i do that?
Also can you share reference so that I can read more on this?

[yangxiuxiu1115]

ohh,You can use it normally.
like this