v-if typeguard doesn't work as expected - but is correct behavior?

[darthmeme]

Hi! I just came across this issue that I don't quite understand. Give the following code

<template>
  <div v-if="foo">
    <button @click="log(foo)">Click me</button>
  </div>
</tempalte>

<script setup lang="ts">
const foo = ref<string>()

const log = (str: string) => {
  console.log(str)
}
</script>

Volar won't complain that this is an issue, but when running vue-tsc via the type-check command, I get the following error in reference to the @click:

 Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.

I came across this thread but I don't completely understand what's going on 😅

If @click compiles into ($event) => { log(foo) }, shouldn't that be irrelevant since the entire DOM node won't exist?

Also given that logic, why doesn't this happens with v-for? For ex, with the following, vue-tsc doesn't error out:

<template>
  <div v-for="str in strings" :key="str">
    <button @click="log(str)">Log {{ str }}</button>
  </div>
</tempalte>

<script setup lang="ts">
const strings = ref<string[]>()

const log = (str: string) => {
  console.log(str)
}
</script>