Rule proposal: vue/prefer-use-template-ref

[jordydhoker]

Please describe what the rule should do: Vue 3.5 released a new preferred method of binding to template refs, useTemplateRef. This rule suggests using the new API over the old plain ref style. It has better dev tools support, supports dynamic keys and is more self-documenting.

What category should the rule belong to?

[ ] Enforces code style (layout) [ ] Warns about a potential error (problem) [X] Suggests an alternate way of doing something (suggestion) [ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<template>
  <input ref="input">
</template>

<script setup>
<!-- BAD -->
const input = ref();

<!-- GOOD -->
import { useTemplateRef } from 'vue'

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

Additional context https://vuejs.org/api/composition-api-helpers.html#usetemplateref Docs about the API https://blog.vuejs.org/posts/vue-3-5#usetemplateref Reasoning for the the new recommendation.

[FloEdelmann]

Good idea! PRs welcome for that.

For reference, support for useTemplateRef is added to vue/no-unused-refs in #2541.