prefer-use-template-ref: should check only root-level variables

[Thomasan1999]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 9.14.0
• eslint-plugin-vue version: 9.31.0
• Vue version: 3.5.12
• Node version: 20.5.1
• Operating System: Windows 11 64-bit

Please show your full configuration:

import pluginVue from 'eslint-plugin-vue';

export default [
    ...pluginVue.configs['flat/essential'],
    {
        files: ['**/*.vue'],
        rules: {
            'vue/prefer-use-template-ref': 'error',
        },
    },
];

What did you do?

<template>
    <div>
        <ul>
            <li ref="firstListItem">Morning</li>
            <li ref="second">Afternoon</li>
            <li>Evening</li>
        </ul>
    </div>
</template>

<script setup>
    import { ref } from 'vue';

    function getFirstListItemElement() {
        const firstListItem = ref();

        const a = () => {
            const second = ref();
        };
    }
</script>

What did you expect to happen?
No errors, only root-level variables should be considered, the nested variables are ignored by Vue when assigning template refs (in onMounted I get null). I had noticed this when trying to implement fix option for this rule. I wanted to create an issue to properly discuss whether this is an expected behavior.

What actually happened?

15:31  error    Replace 'ref' with 'useTemplateRef'                                           vue/prefer-use-template-ref
18:28  error    Replace 'ref' with 'useTemplateRef'                                           vue/prefer-use-template-ref

Repository to reproduce this issue

[FloEdelmann]

Yes,refs inside functions should definitely be ignored. I think we should only consider refs defined in the root scope of <script setup> or the setup() function.

[Thomasan1999]

@FloEdelmann , thank you for the answer, will create a PR with bugfix soon :)