Cannot determine prop from mapped type

[VividLemon]

Vue version

3.4.25

Link to minimal reproduction

https://play.vuejs.org/#eNqFUttu00AQ/ZVhVclFCrGgPAU3Eo2KgEpQQVQeWKQae2K23Zt21yHF+N87u07Sptcn+8yZnTkzczr23trxskU2YYWvnLABPIbWTrkWyhoXYGaUhYUzCrJxHkFMz95t+Q4cLqBfp0SOa64ro30A5Rs4jPx+9hGlNPDDOFm/yF5yXeRDO2pEIKCysgxICKBILSeVkf6VbA45e83ZGqqa4Jst9IrgAcGcHhb5rSpsxIInEQvRjC+80TRfF2tzVlFxIdF9tUGQSM4mkJjIlaTx7+cUC67F0SZe/cHq8oH4hV/FGGenDj26JXK25ULpGgwDffz9C67of0sqU7eSsp8gv6E3so0ah7SjVtck+1ZeUvspXUHoZu6PVwG13wwVhcbMPuVzRpeJe31s9Bu5B+O36R3XPW1xc/G7BgFZ6nibQGVo3+HKIhw5LC+tETp4OnvmVQb/IVN1+sgmGeNO4oeyCsZdFXOgHaCuPfjgaJoRnE2pRpL38wSE3ileejjf6+b9XjcrrQilFP+wOJn2578mcEbTaBK/bjUjn+zqut88i2bKRqBb9RtdcuTgX+uMjU9qXAiNpxGROXcKTvefMXMtlukHoOvWBXuSR0w+ULu+7a8ByEs06A==

Steps to reproduce

Create a mapped type like so:

type Breakpoints = 'sm' | 'md' | 'lg'

type BreakpointFactory<T extends string, V> = {
  [K in Breakpoints as `${T}${Capitalize<K>}`]: V  
}

type ColsBreakpoints = BreakpointFactory<'cols', number>

const props = defineProps<ColsBreakpoints>()

What is expected?

Props receive the correct props definition during the runtime

What is actually happening?

The TS actually knows what the type is, if you observe the App.vue in the reproduction, it knows of cols-lg cols-md cols-sm existence

However, the runtime isn't able to generate the correct types. It believes the required types to be 'lg' |'md' | 'sm'

System Info

System:
    OS: Linux 6.8 Pop!_OS 22.04 LTS
    CPU: (16) x64 AMD Ryzen 7 7800X3D 8-Core Processor
    Memory: 17.64 GB / 30.50 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.7.0 - /run/user/1000/fnm_multishells/51021_1715892856327/bin/node
    npm: 10.1.0 - /run/user/1000/fnm_multishells/51021_1715892856327/bin/npm
    pnpm: 8.6.5 - ~/.local/share/pnpm/pnpm
    bun: 1.0.2 - ~/.bun/bin/bun

Any additional comments?

No response