I have a number of .vue SFC files that are using the <script setup> syntax.

Here's a simplified example of what I mean:

Person.vue

<script setup lang="ts">
import { ref } from "vue";
const person = ref(0);
</script>
<template src="./Person.html"></template>

Person.html

{{ person }}

In those files, I'm defining the data and then, rather than having the template HTML in the file itself, I'm using a src import (as per the official documentation) to have the HTML in a separate file.

Whilst the code works well, the issue is that I keep getting ESLint errors similar to:

ESLint: 'person' is assigned a value but never used.(@typescript-eslint/no-unused-vars)

This issue is solved completely if I instead put the HTML directly into the .vue file:

Person.vue

<script setup lang="ts">
import { ref } from "vue";
const person = ref(0);
</script>
<template>
  {{ person }}
</template>

Is there any way of having ESLint parse the imported template and determine that "person" is indeed a used var?

For reference, here's my .eslintrc.cjs file:

require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/eslint-config-typescript/recommended",
    "@vue/eslint-config-prettier",
  ],
  parser: "vue-eslint-parser",
  overrides: [
    {
      files: ["cypress/integration/**.spec.{js,ts,jsx,tsx}"],
      extends: ["plugin:cypress/recommended"],
    },
  ],
};

Any help will be greatly appreciated!