"Parsing error identifier expected" on v-on:change

I had an issue where importing a class to be used only as a typescript type annotation caused a no-unused vars error. This thread said to add "plugin:@typescript-eslint/recommended" to the eslint config, which solved the issue but caused more parsing errors:

• ESLint: Parsing error: Identifier expected which occurred on v-on:change
• ESLint: Parsing error: '}' expected. which occurred on components: {} in @Component(...)

/App.vue:

<template>
    <div id="app" style="height: 100%">
        <input v-on:change="onChange"/> <!--This is the "Identifier expected" error -->
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Foo from "@/path/to/Foo";
import Bar from "@/path/to/Bar";

@Component({
    components: {  //This is where the `'}' expected.` error occurs
        
    }
})
export default class App extends Vue {
    onChange(e : any) : void {
        let f : Foo = Bar.baz();  //This is what caused the "no-unused-vars" problem before
        f.someFunc();
    }
}
</script>

Here is my Eslint config from package.json:

"eslintConfig": {
    "root": true,
    "env": {
        "node": true
    },
    "extends": [
        "plugin:vue/essential",
        "eslint:recommended",
        "@vue/typescript",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "parser": "@typescript-eslint/parser"
    },
    "rules": {}
}

I've tried enabling vue/valid-v-on in the rules, as well as each of the other exports used in the GitHub thread above.

What should I do to fix this?

Thanks in advance.

Edit: I've removed plugin:@typescript-eslint/recommended" from the eslint config, and put the line // eslint-disable-next-line no-unused-vars above each "unused" import in the code. This is not an optimum solution, so I'll leave the question open.