typescript error in defineModel resolving it to T | Undefined despite setting a type

[HassanDomeDenea]

Vue version

3.5.6

Link to minimal reproduction

https://play.vuejs.org/#eNp9kV1LwzAUhv9KzE07mC1Or0Y3URmo4AcqeJOb2p52nWkS8lEHpf/dk5TNDWR3yXmfE55z0tMbpZLOAZ3TzBS6UZYYsE4Rnot6wag1jC6ZaFoltSU90VCRgVRatiTCtogJJgopjCWtqcnC53F0D5xL8ik1L8+iyREyQ6aEqhHwJEvgmbG6EfUyRsozkkPCZR17Muly7uA6Me5rpOIoiSbhuSwdXdEMLxZaxXMLeCMkW18s+z7YDEOW4u24OjsqN0I5S7rz1svguAgwSlIMs/TgWTrFRaBf1dTJxkiB2+p9P6OFbFXDQb8o26A/o3MSEp/luIWfx1Cz2sF0Vy/WUHz/U9+Yra8x+qrBgO6A0X1mc12DHePV+zNs8bwP0d5xpE+Eb4C7dd5xxG6dKFH7gAu2D+GfcdcfZrW1IMxuKC/qySHwjOLf350Y/U/3MrkKfUwMdPgFIezO1Q==

Steps to reproduce

1. Create New Vue app with bun create vue@latest and following the steps, and update vue to 3.5.6.
2. Edit src/components/HelloWorld.vue, adding this line const msg2 = defineModel<string>() to the last line of setup script
3. After it write the following line: console.log(msg2.value?.substring(0, 1))

What is expected?

1. No type error.
2. Hovering over msg2 in script shows type : Ref and inside template shows type string.

What is actually happening?

1. substring is highlighted red causing type error
2. When hovering over msg2, it shows Ref<T | undefined>, and when using it inside the template, msg2 type is T | undefined

System Info

No response

Any additional comments?

The expected outcome is occurring in version [email protected]

[jh-leong]

1. substring is highlighted red causing type error

The substring method expects a number argument, not a string: (method) String.substring(start: number, end?: number): string.

2. When hovering over msg2, it shows Ref<T | undefined>, and when using it inside the template, msg2 type is T | undefined

I wasn't able to reproduce this issue using the Playground link you provided or locally using VSCode with the latest Vue extension.

Could you please check your environment or provide more details on the setup?

[HassanDomeDenea]

Thank you

The substring method expects a number argument, not a string: (method) String.substring(start: number, end?: number): string.

Yes, that was a typo and it wasn't evaluated in my occasion as substring was not resolved, I fixed it.

I wasn't able to reproduce this issue using the Playground link you provided or locally using VSCode with the latest Vue extension.

I tried again, it works fine in VSCode, but the issue occurs in Jetbrains Phpstorm/Webstorm.

VSCode (Vue 3.5.6):
https://snipboard.io/lo8ix7.jpg

Jetbrains (Vue 3.5.6):
https://snipboard.io/X4ZNnt.jpg

Jetbrains after rolling back to [email protected] (Works fine):
https://snipboard.io/x0YHZN.jpg

So it's IDE related issue it seems.