useTemplateRef finds unrelated references with same name

[ludwig801]

Vue - Official extension or vue-tsc version

2.1.10

VSCode version

1.95.2

Vue version

3.5.12

TypeScript version

5.6.3

System Info

No response

package.json dependencies

No response

Steps to reproduce

Assume the following 2 SFC components in the project:

Component A

<template>
  <div ref="name"></div>
</template>

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

const name = useTemplateRef('name')
</script>

Component B

<template>
  <main ref="name"></main>
</template>

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

const name = useTemplateRef('name')
</script>

Notice that the elements have a ref with the value of "name".
There are 2 issues:

1. When performing "Find All References" on any of the "name" string, the system finds both references, even tough they are unrelated but for the name of the ref (see image below).
   

2. This is actually the worst issue: when renaming one of the strings, the other also gets renamed in the <script setup>. In the image below, this is the result of renaming the ref inside ComponentB.vue. Both useTemplateRef in ComponentA.vue and ComponentB.vue have been renamed, and only ref="name" in ComponentB.vue has been renamed to "name2" (this one was actually expected and the only thing working as expected).
   

What is expected?

When renaming a string ref inside an SFC file, only the refs inside that file get renamed.
The rest of the project should be untouched, as it is unrelated to this action.

What is actually happening?

Any useTemplateRef which references the same named string is renamed, throughout the project.
This is and incredibly dangerous and wild behaviour.

Link to minimal reproduction

No response

Any additional comments?

No response