Before You File a Bug Report Please Confirm You Have Done The Following...

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.
• I have searched for related issues and found none that matched my issue.
• I have read the FAQ and my problem is not listed.

Issue Description

This issue was moved from vuejs/core#12433. It is specific to Vue, but might be coming from typescript-eslint.

See the reproduction steps below. Here are the relevant source code files:

<script setup lang="ts">
import { useTemplateRef } from "vue";

import Modal from "@/components/Modal.vue";

const modal = useTemplateRef<InstanceType<typeof Modal>>("modal");

function close() {
  modal.value?.close();
}
</script>

<template>
  <button @click="modal?.open!">
    Open modal
  </button>
  <button @click="close">
    Close modal
  </button>
  <Teleport to="body">
    <Modal ref="modal" />
  </Teleport>
</template>

<script setup lang="ts">
import { ref } from "vue";

const isOpen = ref(false);

function open() {
  isOpen.value = true;
}

function close() {
  isOpen.value = false;
}

defineExpose({
  open,
  close
});
</script>

<template>
  <div v-if="isOpen">
    Modal
  </div>
</template>

The intent is to use the exported functions from an instance of the Modal component whenever needed. For that, I use Vue's useTemplateRef function and the defineExpose compiler macro.

While running the lint script, I get the following errors:

src/components/App.vue
  9:3   error  Unsafe call of a(n) `any` typed value          @typescript-eslint/no-unsafe-call
  9:16  error  Unsafe member access .close on an `any` value  @typescript-eslint/no-unsafe-member-access

Note that there are two functions exported from the Modal component, namely, open and close. However, I use these functions differently in the App component. The open method is used directly in the template section, whereas for the close function I've created a wrapper of the same name in the script setup section. Note that the error of using an any value is reported only on the wrapper (specifically, on the call modal.value?.close()).

This issue is also eerily similar to vuejs/core#6882.

Reproduction Repository Link

https://github.com/paveloom-o/vue-playground/tree/use-template-ref

Repro Steps

1. git clone --branch use-template-ref https://github.com/paveloom-o/vue-playground.git
2. cd vue-playground
3. direnv allow (OPTIONAL: if you have direnv and nix-direnv installed)
4. npm install
5. npm run lint

Versions

vue-playground@
├── @eslint/js@9.15.0
├── @tsconfig/strictest@2.0.5
├── eslint-plugin-vue@9.31.0
├── eslint@9.15.0
├── typescript-eslint@8.15.0
├── typescript@5.6.3
├── vue-eslint-parser@9.4.3
├── vue-tsc@2.1.10
└── vue@3.5.13

Node: 23.1.0