Description
Vue version
3.5.13
Link to minimal reproduction
Steps to reproduce
I'm not sure why in the linked project I don't have any type errors, but I get them locally when running the same code example. If you have a named defineModel
with required: true
and try to pass it via kebab case to the child component, typescript complains that property-a
isn't being passed. It does say that propertyA
is being passed. I noticed that only the v-model props are being expected in kebab-case, the others are expected in camelcase.
I was also having additional runtime problems with kebab casing, but these were resolved in version 3.5.12. It seems the typescript issue is a lingering problem.
What is expected?
I called defineModel
with the string property-a
and I expect to be able to pass v-model:property-a
.
What is actually happening?
Vue 3's compiler is turning v-model:property-a
into the prop propertyA
but the child component type is expecting property-a
. The expected prop names for other declared props are all camel-cased.
System Info
System:
OS: Windows 10 10.0.26100
CPU: (22) x64 Intel(R) Core(TM) Ultra 7 155H
Memory: 6.28 GB / 31.46 GB
Binaries:
Node: 18.20.3 - ~\AppData\Local\fnm_multishells\56372_1733949521473\node.EXE
npm: 10.7.0 - ~\AppData\Local\fnm_multishells\56372_1733949521473\npm.CMD
Browsers:
Edge: Chromium (131.0.2903.48)
Internet Explorer: 11.0.26100.1882
npmPackages:
vue: ^3.5.13 => 3.5.13
Any additional comments?
One workaround is @vue-ignore
, another is to only use single-word v-model names.