Script-Indent rule inconsistences

Tell us about your environment

• ESLint Version: 4.19.1
• eslint-plugin-vue Version: 4.4.0
• Node Version: 9.3.0

Please show your full configuration:

module.exports = {
    root: true,
    parserOptions: {
        parser: 'babel-eslint',
        sourceType: 'module'
    },
    extends: ['airbnb-base', 'plugin:vue/recommended'],
    // check if imports actually resolve
    settings: {
        'import/resolver': {
            webpack: {
                config: './webpack/build/webpack.base.conf.js'
            }
        }
    },
    // add your custom rules here
    rules: {
        'import/no-unresolved': [
            'error',
            {
                caseSensitive: false
            }
        ],
        'linebreak-style': ['error', 'windows'],
        'arrow-parens': ['error', 'always'],
        'eol-last': ['off'],
        'max-len': ['off'],
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        'comma-dangle': ['error', 'never'],
        indent: [
            'error',
            4,
            {
                SwitchCase: 1
            }
        ],
        // Vue specific overrides
        'vue/script-indent': [
            'error',
            4,
            {
                switchCase: 1
            }
        ],
        'vue/html-indent': [
            'error',
            4,
            {
                attribute: 1,
                closeBracket: 0,
                alignAttributesVertically: true,
                ignores: []
            }
        ],
        'vue/v-on-style': ['error', 'longform'],
        'vue/max-attributes-per-line': ['off']
    }
};

What did you do? Please include the actual source code causing the issue.

<template>
    <b-modal size="lg" title="Exam Schedule" ok-only ok-title="Close" v-on:hide="modalHide" visible>
        <template v-if="selectedSchedule === null">
            <alert v-model="alertDetails" />
            <p>Select a time you can take the exam by clicking "Select" from the list below. If you have previously chosen a time it will be labeled "Scheduled". You may change your choice by clicking "Select" for another time.</p>
            <schedules-table v-on:selected="scheduleSelected" :selected-exam="selectedExam" />
        </template>
        <template v-else>
            <confirm-schedule :selected-schedule="selectedSchedule" v-on:cancel="confirmScheduleCancelled" v-on:confirm="confirmSchedule" />
        </template>
    </b-modal>
</template>

<script>
import Alert from '@/components/Home/Alert.vue';
import SchedulesTable from '@/components/Home/SchedulesTable.vue';
import ConfirmSchedule from '@/components/Home/ConfirmSchedule.vue';
import { registerForExam } from '@/lib/api';

export default {
    name: 'RegisterDialog',
    components: {
        Alert,
        ConfirmSchedule,
        SchedulesTable
    },
    props: {
        selectedExam: {
            type: Object,
            default: null,
            required: true
        }
    },
    data() {
        return {
            selectedSchedule: null,
            alertDetails: {
                variant: 'info',
                message: null
            }
        };
    },
    methods: {
        modalHide() {
            this.$emit('closed');
        },
        scheduleSelected(schedule) {
            this.alertDetails.variant = 'info';
            this.alertDetails.message = null;
            this.selectedSchedule = schedule;
        },
        confirmScheduleCancelled() {
            this.selectedSchedule = null;
        },
        confirmSchedule() {
            registerForExam(this.selectedExam.IdExam, this.selectedSchedule.IdSchedule)
                .then((response) => {
                    this.alertDetails.variant = 'success';
                    this.alertDetails.message = 'Exam registration has been created';
                    this.selectedExam.Registration = response.data;
                })
                .catch((error) => {
                    this.alertDetails.variant = 'danger';
                    this.alertDetails.message = `Unable to register for exam - ${error.response.status} : ${
                        error.response.statusText
                    }`;
                })
                .finally(() => {
                    this.selectedSchedule = null;
                });
        }
    }
};
</script>

What did you expect to happen? I would expect this code to validate in regards to script-spacing settings specified in eslint config.

What actually happened? Please include the actual, raw output from ESLint. Eslint returns an error -

70:1   error  Expected indentation of 12 spaces but found 16 spaces        vue/script-indent

I had been using version 4.2.0 of the plugin without any issues.

[euclid1990]

@sqal Have your pull request been merged ? I am facing the similar problem 😦

[sqal]

I wanted to open a new issue but I guess fix (PR: #503) from @ota-meshi will also resolve my issue as well? Playground reproduction