Make PhpStorm respect v-if for variable resolution in a project with Vue 3, Pinia, and TypeScript

Question

I'm using JetBrains PhpStorm for a Vue 3 project that utilizes TypeScript and a Pinia store. The Pinia store defines a variable currentSnackbar=ref<ISnackbar>(). The value may be undefined or an object that conforms to the ISnackbar interface. In the Vue template, I verify that the value is not undefined using v-if. Inside that v-if, I should then be able to safely access the properties defined in the ISnackbar interface.

Inside the v-if statement, PhpStorm is correctly identifying the type of the currentSnackbar as ISnackbar|undefined.

However, PhpStorm seems to ignore the v-if statement when referencing currentSnackbar inside of the element with the v-if. PhpStorm shows that currentSnackbar may be undefined:

Referencing a property defined in the ISnackbar interface, then gives an "unresolved variable reference":

ISnackbar.ts:

export default interface ISnackbar {
  id: string
  message: string
  color: string
  timeout: number
}

ui.store.ts:

export const useUiStore = defineStore('ui', () => {
  const currentSnackbar: Ref<ISnackbar|undefined> = ref<ISnackbar>()
})

App.vue:

<script lang="ts" setup>
import {useUiStore} from "@/store/ui.store";
const uiStore = useUiStore()
</script>
<template>
  <div v-if="uiStore.currentSnackbar">
    {{ uiStore.currentSnackbar.message }}
  </div>
</template>

Given this code, I expect {{ uiStore.currentSnackbar.message }} to be fully resolved by the IDE.

I can resolve the IDE error by changing {{ uiStore.currentSnackbar.message }} to {{ uiStore.currentSnackbar?.message }} but the optional chaining should be unnecessary if the IDE respected the v-if.

Do I have a logical error that I'm not seeing? If not, what do I need to do to make PhpStorm respect the v-if?