Eslint configuration for separated Vue component

Question

Here is my eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential"
    ],    
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "plugins": [
        "vue",
        "eslint-plugin-vue"
    ],
    
    "rules": {       
        "vue/no-async-in-computed-properties": "error",
        "vue/no-unused-vars": "error"
    }
}

And This is my vue component(mycomponent.js). I am using vue CDN to define the vue component.

const myComponent = Vue.defineComponent({
    template: '#myTemplate',
    components: {
        'other-component': otherComponent,
    },

   props: {...}
   watch: {...}
   data() {return {...}}
   methods: {
       fn1() {
           let a;
       }
   }


});

As you can see, The vue component has an unused variable in the fn1 function. But it doesn't give any error. Please review if there is any issues in the eslint configuration.

I already installed the eslint-plugin-vue package.