ESLintPlugin TS and JS Hybrid: ERROR in parent.eval is not a function

Update

This configuration works fine, if you remove the ESLintPlugin from webpack.mix.js. The question now is: Where does it go wrong and why?

I'm trying to get TypeScript support on an existing Vue project. I would like to update gradually, keeping all the JavaScript code in place and using TypeScript for everything new or where there is a need for refactoring.

Currently, I'm stuck on a strange problem. Running with npm run hot:

$ npm run hot

> hot
> mix watch --hot

i Compiling Mix
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

// Some more warning from vuetify. They are not important right now.

√ Mix: Compiled with some errors in 7.29s
ERROR in parent.eval is not a function
Occurred while linting C:\fakepath\ts-test\resources\js\app.ts:7

webpack compiled with 1 error
No issues found.

Unfortunately, I can't find anything regarding this error ERROR in parent.eval is not a function.

Even weirder is, that every time I re-write the tsconfig.json it works fine:

i Compiling Mix


   Laravel Mix v6.0.31


✔ Compiled Successfully in 201ms
┌───────────────────────────────────┬───────────┐
│                              File │ Size      │
├───────────────────────────────────┼───────────┤
│                    /some/files.js │  X.X KiB  │
└───────────────────────────────────┴───────────┘
√ Mix: Compiled successfully in 252.23ms
webpack compiled successfully
Issues checking in progress...
No issues found.

Because this issue involves way too many config files, to reasonably post here, I created a small GitHub project:

https://github.com/Darkproduct/vue2-ts-test

The files to look at, are probably:

• webpack.mix.js
• tsconfig.json
• .eslintrc.js

Some things to note:

1. I have to use // @ts-ignore in App.vue line 51, because eslint is trying to type check the vue file, even if the script tag is not lang="ts".

ERROR in resources/js/views/App.vue:51:12
TS2339: Property '$vuetify' does not exist on type '{ changeTheme(): void; }'.
  49 |       // });
  50 |
> 51 |       this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
     |            ^^^^^^^^
  52 |     }
  53 |   },

I thought this file shouldn't be validated from TS, because of my .eslintrc.js. Why isn't this working as intendet? (Documentation vue-eslint-parser#parseroptionsparser)

2. Type validation isn't working in testts.vue. I set the props in App.vue, and from my understanding at least one of them, if not both, have to raise a type error for the testts.vue component.

From testts.vue:

props: {
    testprop: {
        type: Object as PropType<TestType>,
        required: true
    }
},

In App.vue:

<TestTS :testprop="{name: 'testts', id: '2'}"></TestTS>
<TestTS :testprop="{blub: 'bla', id: '3'}"></TestTS>

And testtype.ts

export default interface TestType {
  name: string;
  id: number;
}