vue-component-meta: Invalid component prop types when using options api + a prop with a default function

[adamDilger]

Vue version

3.4.27

Link to minimal reproduction

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgEwKYDNgDtUGELgQ5bwC+c6UBcA5AG4CuqNA3AFBsDGRAzvPuDgBeFBmx4CkYjAAUCNnEUoAhjGUyAlIgVLdUVDAZQs23WaXJVygPI4AXHABEACVQAbNxDgB1aG+RwAGJUIHAAIlaOOuak0XCkADRxYFRgPA7y5oopEGC2qA4AyjBQ2ADmSVlwOWAAKgDuEBlxVTAAnmAFcMWlWBUtWWjoygxuslqZVVn6hsa0rAMxi-FxiWykGuxsAPTbcAACMDwAtKgAHp2cMKdQVFBsMjj1cAJgmhoAdAAkNTwfbqg+jAABZbbhYPgvSS+KAAa3KwlEmBwryIgNkk0UljUmlM0wMRhMmKm2Js9icrg8Xhh-iCIXCkWWsV0a10v2aVRq+SKJXKlSyNQaTTxUzg7U6PN6-VFil2cAAchAYF0sF4hiMxhQGFgrsAiEzVutNhw5YcTudLtdULdoA8nlDwDD4X13t9fv9AWUQSwgA

Steps to reproduce

Create a component with defineComponent that has a prop with a default function e.g.

export default defineComponent({
    data() {
        return {
            dataOne: "Hello World From Data"
        }
    },
    props: {
        propOne: String,
        propTwo: {
            type: String,
            default() { // <-- this causes invalid prop types in the template
                return ''; 
            }
        }
    }
});

What is expected?

Correct prop types in the template

What is actually happening?

Invalid prop types, looks like it's showing array values as prop types

System Info

No response

Any additional comments?

Originally posted in volar repo, but requested to post here instead: https://github.com/vuejs/language-tools/issues/3323

[ferreraa]

The problem seems to be related to the function syntax used.

A workaround to the issue is to define your default function that way default: () => { return ''; }

[linzhe141]

When I comment out the data function, it works

const Comp = defineComponent({
  // data() {
  //   this.$props.propTwo
  //   return {
  //     dataOne1: 'Hello World From Data',
  //   }
  // },
  props: {
    propOne: String,
    propTwo: {
      default() {
        return 'foo'
      },
    },
  },
})

new Comp().$props.propOne

Or when my data function is written after props, it will also work.

const Comp = defineComponent({
  props: {
    propOne: String,
    propTwo: {
      default() {
        return 'foo'
      }
    }
  },
  data() {
    this.$props.propTwo
    return {
      dataOne1: 'Hello World From Data'
    }
  }
})

new Comp().$props.propOne