vue-cli3 eslint vue/script-indent conflicting with compiler

Question

When I have my .eslint.js file include the rule:

"vue/script-indent": [
    "error",
    4,
    {
        "baseIndent": 1,
        "switchCase": 1,
    }
]

and save, it generates the error:

error: Expected indentation of 32 spaces but found 24 spaces (vue/script-indent)

What's causing this weird conflict? (since it doesn't seem to be taking the rules from my .eslint.js file)

Example

<template>
    <div>
        <label>
            Display Name: 
            <a></a>
            <input 
                v-model="data.display_name"
                class="form-control"
                type="text"
            >
        </label>
    </div>
</template>

.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended"
    ],
    // "parser": "vue-eslint-parser",
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 2018,
        "allowImportExportEverywhere": true
    },
    "rules": {
        "array-bracket-newline":
            [
                "error",
                {
                    minItems: 1
                }
            ],        
        "array-element-newline":
            [
                "error",
                "always"
            ],        
        "brace-style": [
            "error",
            "allman",
            {
                "allowSingleLine": true
            }
        ],
        "function-paren-newline":
            [
                "error",
                {
                    minItems: 
                        2
                }
            ],
        "indent": [
            "error",
            4,
            {
                "SwitchCase": 1,
                "ObjectExpression":
                    "first",
                "ArrayExpression":
                    "first"
            }
        ],
        "newline-per-chained-call":
            [
                "error",
                {
                    "ignoreChainWithDepth": 1
                }
            ],        
        "no-console": "off",
        "no-fallthrough": "off",
        "no-case-declarations": "off",
        "no-unneeded-ternary": "error",
        "no-unused-vars":
            [
                "error",
                {
                    "args": "none"
                }
            ],
        "object-curly-newline":
            [
                "error",
                {
                    "ObjectExpression":
                        {
                            "multiline":
                                true,
                            "minProperties":
                                1
                        },
                    "ObjectPattern":
                        {
                            "multiline":
                                true,
                            "minProperties":
                                1
                        },
                    "ImportDeclaration":
                        {
                            "multiline":
                                true,
                            "minProperties":
                                1
                        },
                    "ExportDeclaration":
                        {
                            "multiline":
                                true,
                            "minProperties":
                                1
                        }
                }
            ],       
        "object-property-newline":
            [
                "error",
                {
                    "allowAllPropertiesOnSameLine":
                        false
                }
            ],        
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "never"
        ],
        // "vue/component-name-in-template-casing": [
        //     "never"
        // ],
        "vue/attribute-hyphenation": [
            "never"
        ],        
        "vue/html-closing-bracket-newline": [
            "error",
            {
                "singleline": "never",
                "multiline": "always"
            }
        ],
        "vue/html-indent": [
            "error",
            4,
            {
                "attribute": 1,
                "closeBracket": 0,
                "alignAttributesVertically": true,
                "ignores": []
            }
        ],

        "vue/prop-name-casing": [
            "never",
        ],
        "vue/html-self-closing": [
            "never"
        ],
        "vue/multiline-html-element-content-newline": [
            "never"
        ],
        "vue/no-unused-components": [
            "never"
        ],
    },
    "overrides": [
        {
            "files": [
                "*.vue"
            ],
            "rules": {
                "indent": "off",
                "vue/script-indent": [
                    "error",
                    4,
                    {
                        "baseIndent": 1,
                        "switchCase": 1,
                        "ignores": [
                            // nested objects, excluding top level of exported object (data, methods, computed, etc.)
                            "[value.type='ObjectExpression']:not(:matches(ExportDefaultDeclaration, [left.property.name='exports']) > * > [value.type='ObjectExpression'])",

                            // nested arrays
                            "[value.type='ArrayExpression']"
                        ]
                    }
                ]
            }
        }
    ]
}

Answer 1

'overrides': [
{
  'files': ['*.vue'],
  'rules': {
    'indent': 'off'
  }
}

reference