Lint Vue/JS upon "watch"

Hi, trying to get my project to automatically lint Vue JS files in resources/assets/js folder automatically when running yarn run watch. My resources/assets/js folder looks something like this:

components/
    my-component/
        my-component.scss
        my-component.js
        my-component.html
        my-component.vue
bootstrap.js
app.js

Currently when running yarn run watch it only catches errors in the bootstrap.js and app.js file, but not the Vue components in the components/ folder. Have added the following to my webpack.mix.js file:

mix.webpackConfig({
    module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.(js|vue)$/,
                exclude: /node_modules|semantic/,
                loader: 'eslint-loader'
            }
        ]
    }
});

My .eslintrc.js file look like this:

module.exports = {
    root: true,
    parserOptions: {
        parser: 'babel-eslint',
        ecmaVersion: 2017,
        sourceType: 'module'
    },
    env: {
        browser: true
    },
    plugins: [
        'vue'
    ],
    extends: [
        'standard',
        'plugin:vue/recommended'
    ]
}

In package.json file I have added a script:

"lint": "eslint --ext .js,.vue src resources/assets/js"

And if running yarn run lint it catches the errors, but want to have this working upon save while running yarn run watch.

Any ideas?

Thanks in advance!

EDIT If I do single file Vue components with .vue extension it works, but not with .js.