hover prop type detail box info children component. vs code read props as kebab case issue.

[vutran6853]

• [x] I have searched through existing issues
• [x] I have read through docs
• [x] I have read FAQ

Info

• Platform: Win
• Vetur version: 0.28.0
• VS Code version: 1.49.2

Problem

My child props 'myNumberIs' is camelCase but when I hover over child component prop info box from my parent component. vs code detail read props as kebab case 'my-number-is'. Is there way to fix this on how we define our props instead default to kebab-case?

Reproducible Case

1) create new vue cli project with verison 4.5.4 2) vue 3 preview default selection. 3) turn on
"vetur.experimental.templateInterpolationService": true, "vetur.validation.templateProps": true, 4) code: Parent Component

<template>
  <div>
    <Test :str=' "foo" ' :myNumberIs='1' />
  </div>
</template>

<script lang="ts">
import * as Vue from 'vue'
import Test from './Test.vue'

export default Vue.defineComponent({
  name: 'Parent',
  components: { 
    Test 
  },
  data() {
    return {
      num: 42
    }
  }
})

</script>

Child Component

<template>
  <div>
    <p>My prop str is {{ str }}</p>
  </div>
</template>

<script lang="ts">
import * as Vue from 'vue'

export default Vue.defineComponent({
  name: 'Test',
  props: { 
    str: {
      type: String as Vue.PropType<'foo' | 'bar'>,
      required: true
    },
    myNumberIs: {
      type: Number as Vue.PropType<2 | 1>,
      required: true
    }
  }
})
</script>

[andrewisaburden]

Vue expects kebab-case for prop names in templates: https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

[vutran6853]

@andrewisaburden Vue don't expects but recommend this code style to use kebab-case. But you can use both camelCase and kebab-case for props. This does not solve my problem with vetur. vetur should support both since vue support both and can be use.