VueJs - Vetur keeps creating weird linebreak and then eslint complains about it

Question

I am currently using eslint in a vue project of mine and while I really like linters at the moment it's driving me crazy. I have the following line

this.someIndex = this.someObject.someKey.length % this.someIndex;

Which the linter first keeps changing to

this.someIndex = 
  this.someObject.someKey.length % this.someIndex;

and then tells me in the output

error: There should be no line break before or after '='

It kind of feels like there is too linter settings conflicting with each other (before that error i also had the linter removing dangling commas on save and then showing the error that it wants dangling commas which was pretty easy to fix in the .eslintrc.js but still shouldn't happen)

At the moment my .eslintrc.js looks like this

Any idea what is going wrong?

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'comma-dangle': [1, {
      'arrays': 'never',
      'objects': 'never',
      'imports': 'never',
      'exports': 'never',
      'functions': 'ignore'
    }],
    'quotes': [0, 'double'],
    'linebreak-style': [0, 'unix']
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

Update

After some digging I found that the conflict results from the Vetur Extension from Vue makes changes to the files on save which then conflict with the eslint settings. So the solution would be to make Vetur use the eslint config in the root folder as well or at least configure it identically but I was unable to find out how so far. Any ideas?