Conditional types with v-if are not working through variables

[AdrianFahrbach]

Vue - Official extension or vue-tsc version

v2.0.28

VSCode version

1.92.0

Vue version

3.4.36

TypeScript version

5.5.4

System Info

System:
    OS: macOS 14.6
    CPU: (11) arm64 Apple M3 Pro
    Memory: 74.70 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.15.0/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.0/bin/npm
  Browsers:
    Chrome: 127.0.6533.100
    Safari: 17.6
    Safari Technology Preview: 18.0

Steps to reproduce

1. Create a prop with a conditional type where on of the types has an additional property
2. Check for these conditional types in a variable
3. Add two elements with v-if that access the additional property. On of them filters the correct type directly in the template and one does it through the previously created variable.
4. One of them should throw an "Property x does not exist on type [...]" error

What is expected?

Conditional types should be working even when I'm using a variable to check them.

What is actually happening?

Conditional types are only detected correctly if I do everything in the template.

Link to minimal reproduction

No response

Any additional comments?

<template>
  <p v-if="blok.component === 'with-text'">
    {{ blok.text }}
  </p>
  <p v-if="isWithText">
    {{ blok.text }}
  </p>
</template>

<script lang="ts" setup>
interface WithText {
  component: 'with-text'
  text: string
}

interface WithoutText {
  component: 'without-text'
}

const props = defineProps<{ blok: WithText | WithoutText }>()

const isWithText = props.blok.component === 'with-text'
</script>

[KazariEX]

Duplicate of #4629