Reactivity Transform with Discriminated unions causes type inconsistencies between <script> and<template>

[UfukUstali]

Describe the bug

When using reactivity transform with discriminated unions while eveything works perfectly fine and the types are fine in the script side, they are broken when it comes to the template as can be seen below and in the minimal reproduction.
I am using volar v1.8.6 alongside TypeScript Vue Plugin (Volar)
v1.8.22 in vscode with takeover mode enabled.
I am still not sure if this is a bug with Reactivity Transform or volar though.

<script lang="ts" setup>
const { foo, bar } = $(
  reactive<{ foo: "bar"; bar: { biz: 3 } } | { foo: "baz"; bar: null }>({
    foo: "bar",
    bar: {
      biz: 3,
    },
  })
);

watch($$(bar), () => {
  if (foo === "bar") console.log(bar);
  //                              ^? const bar: { biz: 3; }
});
</script>

<template>
  <div v-if="foo === 'bar'">{{ bar.biz }}</div>
  <!--                          ^? '__VLS_ctx.bar' is possibly 'null' -->
</template>

Reproduction

https://github.com/UfukUstali/Vue-Macros-Minimal-Reproduction

System Info

System:
    OS: Windows 11 10.0.22635
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 4.00 GB / 15.36 GB
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.10.2 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (119.0.2151.44)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.