"Unsafe member access" errors when using exposed methods from template refs

[paveloom]

Vue version

3.5.13

Link to minimal reproduction

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

Steps to reproduce

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

What is expected?

No errors should be reported.

What is actually happening?

The following errors are reported:

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

System Info

System:
    OS: Linux 6.11 cpe:/o:nixos:nixos:24.11 24.11 (Vicuna)
    CPU: (16) x64 AMD Ryzen 7 5700U with Radeon Graphics
    Memory: 20.45 GB / 30.68 GB
    Container: Yes
    Shell: 3.7.1 - /run/current-system/sw/bin/fish
  Binaries:
    Node: 23.1.0 - /nix/store/bc1blqcb391vjj251had3dbrnq5rb7md-nodejs-23.1.0/bin/node
    npm: 10.9.0 - /nix/store/bc1blqcb391vjj251had3dbrnq5rb7md-nodejs-23.1.0/bin/npm
  npmPackages:
    vue: ^3.5.13 => 3.5.13

Any additional comments?

App.vue

<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>

Modal.vue

<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.

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 #6882.

[edison1105]

Yes, It is a duplicate of #6882.
But it doesn't seem to be an issue with vue or language-tools, because the type hints for modal.value and close are correct. It seems more like a problem with typescript-lint.