diff --git a/.changeset/cool-cycles-lick.md b/.changeset/cool-cycles-lick.md
new file mode 100644
index 000000000..b2903faa5
--- /dev/null
+++ b/.changeset/cool-cycles-lick.md
@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue": minor
+---
+
+Added autofix to [vue/prefer-use-template-ref](https://eslint.vuejs.org/rules/prefer-use-template-ref.html).
diff --git a/docs/rules/index.md b/docs/rules/index.md
index 7828b58bb..70691eae7 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -272,7 +272,7 @@ For example:
 | [vue/prefer-prop-type-boolean-first] | enforce `Boolean` comes first in component prop types | :bulb: | :warning: |
 | [vue/prefer-separate-static-class] | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: |
 | [vue/prefer-true-attribute-shorthand] | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
-| [vue/prefer-use-template-ref] | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs |  | :hammer: |
+| [vue/prefer-use-template-ref] | require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs | :wrench: | :hammer: |
 | [vue/require-default-export] | require components to be the default export |  | :warning: |
 | [vue/require-direct-export] | require the component to be directly exported |  | :hammer: |
 | [vue/require-emit-validator] | require type definitions in emits | :bulb: | :hammer: |
diff --git a/docs/rules/prefer-use-template-ref.md b/docs/rules/prefer-use-template-ref.md
index 1b1b40385..cfa9a7a88 100644
--- a/docs/rules/prefer-use-template-ref.md
+++ b/docs/rules/prefer-use-template-ref.md
@@ -10,6 +10,8 @@ since: v9.31.0
 
 > require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs
 
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
 ## :book: Rule Details
 
 Vue 3.5 introduced a new way of obtaining template refs via
@@ -17,7 +19,7 @@ the [`useTemplateRef()`](https://vuejs.org/guide/essentials/template-refs.html#a
 
 This rule enforces using the new `useTemplateRef` function instead of `ref`/`shallowRef` for template refs.
 
-<eslint-code-block :rules="{'vue/prefer-use-template-ref': ['error']}">
+<eslint-code-block fix :rules="{'vue/prefer-use-template-ref': ['error']}">
 
 ```vue
 <template>
@@ -45,7 +47,7 @@ This rule enforces using the new `useTemplateRef` function instead of `ref`/`sha
 This rule skips `ref` template function refs as these should be used to allow custom implementation of storing `ref`. If you prefer
 `useTemplateRef`, you have to change the value of the template `ref` to a string.
 
-<eslint-code-block :rules="{'vue/prefer-use-template-ref': ['error']}">
+<eslint-code-block fix :rules="{'vue/prefer-use-template-ref': ['error']}">
 
 ```vue
 <template>
diff --git a/lib/rules/prefer-use-template-ref.js b/lib/rules/prefer-use-template-ref.js
index eb8b8c06d..d0a16600e 100644
--- a/lib/rules/prefer-use-template-ref.js
+++ b/lib/rules/prefer-use-template-ref.js
@@ -8,7 +8,7 @@ const utils = require('../utils')
 
 /**
  * @typedef ScriptRef
- * @type {{node: Expression, ref: string}}
+ * @type {{node: Expression, ref: string, typeArguments?: string[]}}
  */
 
 /**
@@ -20,7 +20,15 @@ function convertDeclaratorToScriptRef(declarator) {
     // @ts-ignore
     node: declarator.init,
     // @ts-ignore
-    ref: declarator.id.name
+    ref: declarator.id.name,
+    // @ts-ignore
+    ...(declarator.init?.typeArguments && {
+      // @ts-ignore
+      typeArguments: declarator.init.typeArguments.params.map(
+        // @ts-ignore
+        (param) => param.typeName.name
+      )
+    })
   }
 }
 
@@ -44,6 +52,58 @@ function getScriptRefsFromSetupFunction(body) {
   return refDeclarators.map(convertDeclaratorToScriptRef)
 }
 
+/** @param node {Statement | ModuleDeclaration} */
+function createIndent(node) {
+  const indentSize = node.loc.start.column
+
+  return ' '.repeat(indentSize)
+}
+
+/**
+ *  @param context {RuleContext}
+ *  @param fixer {RuleFixer}
+ * */
+function addUseTemplateRefImport(context, fixer) {
+  const sourceCode = context.getSourceCode()
+
+  if (!sourceCode) {
+    return
+  }
+
+  const body = sourceCode.ast.body
+  const imports = body.filter((node) => node.type === 'ImportDeclaration')
+
+  const vueDestructuredImport = imports.find(
+    (importStatement) =>
+      importStatement.source.value === 'vue' &&
+      importStatement.specifiers.some(
+        (specifier) => specifier.type === 'ImportSpecifier'
+      )
+  )
+
+  if (vueDestructuredImport) {
+    const importSpecifiers = vueDestructuredImport.specifiers
+    const lastImportSpecifier = importSpecifiers[importSpecifiers.length - 1]
+
+    // @ts-ignore
+    return fixer.insertTextAfter(lastImportSpecifier, `, useTemplateRef`)
+  }
+
+  const importStatement = "import { useTemplateRef } from 'vue';"
+  const lastImport = imports[imports.length - 1]
+
+  if (lastImport) {
+    const indent = createIndent(lastImport)
+
+    return fixer.insertTextAfter(lastImport, `\n${indent}${importStatement}`)
+  }
+
+  const firstNode = body[0]
+  const indent = createIndent(firstNode)
+
+  return fixer.insertTextBefore(firstNode, `${importStatement}\n${indent}`)
+}
+
 /** @type {import("eslint").Rule.RuleModule} */
 module.exports = {
   meta: {
@@ -54,6 +114,7 @@ module.exports = {
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/prefer-use-template-ref.html'
     },
+    fixable: 'code',
     schema: [],
     messages: {
       preferUseTemplateRef: "Replace '{{name}}' with 'useTemplateRef'."
@@ -94,6 +155,8 @@ module.exports = {
       }),
       {
         'Program:exit'() {
+          let missingImportChecked = false
+
           for (const templateRef of templateRefs) {
             const scriptRef = scriptRefs.find(
               (scriptRef) => scriptRef.ref === templateRef
@@ -109,6 +172,30 @@ module.exports = {
               data: {
                 // @ts-ignore
                 name: scriptRef.node?.callee?.name
+              },
+              fix(fixer) {
+                const typeArgumentsString = scriptRef.typeArguments
+                  ? `<${scriptRef.typeArguments.join(', ')}>`
+                  : ''
+                const replaceFunctionFix = fixer.replaceText(
+                  scriptRef.node,
+                  `useTemplateRef${typeArgumentsString}('${scriptRef.ref}')`
+                )
+
+                if (!missingImportChecked) {
+                  missingImportChecked = true
+
+                  const missingImportFix = addUseTemplateRefImport(
+                    context,
+                    fixer
+                  )
+
+                  if (missingImportFix) {
+                    return [replaceFunctionFix, missingImportFix]
+                  }
+                }
+
+                return replaceFunctionFix
               }
             })
           }
diff --git a/tests/lib/rules/prefer-use-template-ref.js b/tests/lib/rules/prefer-use-template-ref.js
index afc6d6a11..bfad78dde 100644
--- a/tests/lib/rules/prefer-use-template-ref.js
+++ b/tests/lib/rules/prefer-use-template-ref.js
@@ -311,6 +311,15 @@ tester.run('prefer-use-template-ref', rule, {
         const root = ref();
       </script>
       `,
+      output: `
+      <template>
+          <div ref="root"/>
+      </template>
+      <script setup>
+        import { ref, useTemplateRef } from 'vue';
+        const root = useTemplateRef('root');
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -335,6 +344,17 @@ tester.run('prefer-use-template-ref', rule, {
         const link = ref();
       </script>
       `,
+      output: `
+      <template>
+          <button ref="button">Content</button>
+          <a href="" ref="link">Link</a>
+      </template>
+      <script setup>
+        import { ref, useTemplateRef } from 'vue';
+        const buttonRef = ref();
+        const link = useTemplateRef('link');
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -359,6 +379,17 @@ tester.run('prefer-use-template-ref', rule, {
         const link = ref();
       </script>
       `,
+      output: `
+      <template>
+          <h1 ref="heading">Heading</h1>
+          <a href="" ref="link">Link</a>
+      </template>
+      <script setup>
+        import { ref, useTemplateRef } from 'vue';
+        const heading = useTemplateRef('heading');
+        const link = useTemplateRef('link');
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -396,6 +427,22 @@ tester.run('prefer-use-template-ref', rule, {
         }
       </script>
       `,
+      output: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        import { ref, useTemplateRef } from 'vue';
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            const button = useTemplateRef('button');
+          }
+        }
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -418,6 +465,15 @@ tester.run('prefer-use-template-ref', rule, {
         const root = shallowRef();
       </script>
       `,
+      output: `
+      <template>
+          <div ref="root"/>
+      </template>
+      <script setup>
+        import { shallowRef, useTemplateRef } from 'vue';
+        const root = useTemplateRef('root');
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -444,6 +500,19 @@ tester.run('prefer-use-template-ref', rule, {
         }
       </script>
       `,
+      output: `
+      <template>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        import { ref, useTemplateRef } from 'vue';
+        export default {
+          setup: () => {
+            const button = useTemplateRef('button');
+          }
+        }
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -467,6 +536,20 @@ tester.run('prefer-use-template-ref', rule, {
       const root = ref()
       </script>
 
+      <script>
+      const A = 'foo'
+      </script>
+      `,
+      output: `
+      <template>
+        <div ref="root" :data-a="A" />
+      </template>
+
+      <script setup>
+      import { ref, useTemplateRef } from 'vue'
+      const root = useTemplateRef('root')
+      </script>
+
       <script>
       const A = 'foo'
       </script>
@@ -498,6 +581,20 @@ tester.run('prefer-use-template-ref', rule, {
       const root = ref()
       </script>
       `,
+      output: `
+      <template>
+        <div ref="root" :data-a="A" />
+      </template>
+
+      <script>
+      const A = 'foo'
+      </script>
+
+      <script setup>
+      import { ref, useTemplateRef } from 'vue'
+      const root = useTemplateRef('root')
+      </script>
+      `,
       errors: [
         {
           messageId: 'preferUseTemplateRef',
@@ -508,6 +605,151 @@ tester.run('prefer-use-template-ref', rule, {
           column: 20
         }
       ]
+    },
+    {
+      filename: 'missing-import.vue',
+      code: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        import { isEqual } from 'lodash';
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            if (isEqual(counter.value, 0)) {
+              console.log('Counter is reset');
+            }
+            const button = ref();
+          }
+        }
+      </script>
+      `,
+      output: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        import { isEqual } from 'lodash';
+        import { useTemplateRef } from 'vue';
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            if (isEqual(counter.value, 0)) {
+              console.log('Counter is reset');
+            }
+            const button = useTemplateRef('button');
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 15,
+          column: 28
+        }
+      ]
+    },
+    {
+      filename: 'no-imports.vue',
+      code: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            const button = ref();
+          }
+        }
+      </script>
+      `,
+      output: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script>
+        import { useTemplateRef } from 'vue';
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            const button = useTemplateRef('button');
+          }
+        }
+      </script>
+      `,
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 11,
+          column: 28
+        }
+      ]
+    },
+    {
+      filename: 'script-lang-ts.vue',
+      code: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script lang="ts">
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            const button = ref<HTMLDivElement>();
+          }
+        }
+      </script>
+      `,
+      output: `
+      <template>
+        <p>Button clicked {{counter}} times.</p>
+        <button ref="button">Click</button>
+      </template>
+      <script lang="ts">
+        import { useTemplateRef } from 'vue';
+        export default {
+          name: 'Counter',
+          setup() {
+            const counter = ref(0);
+            const button = useTemplateRef<HTMLDivElement>('button');
+          }
+        }
+      </script>
+      `,
+      languageOptions: {
+        parserOptions: {
+          parser: require.resolve('@typescript-eslint/parser')
+        }
+      },
+      errors: [
+        {
+          messageId: 'preferUseTemplateRef',
+          data: {
+            name: 'ref'
+          },
+          line: 11,
+          column: 28
+        }
+      ]
     }
   ]
 })