.vue file with mustache code-format conflict with eslint-plugin-vue

Here is a demo.

<template>
  <div>
    {{ foo }}<span id="id" style="width: 20px">span content</span>
  </div>
</template>

<script>
  export default {
    name: 'Test',
    data() {
      return {
        foo: 'bar'
      }
    },
  }
</script>

Key rules is:

- vue/max-attributes-per-line

- vue/html-indent

Two formart result:

<template>
  <!--ESLint Result(Fix ESLint Problems)-->
  <div>
    {{ foo }}<span
      id="id"
      style="width: 20px">span content</span>
  </div>
</template>

<template>
  <!--Webstorm format Result(Ctrl+Alt+L)-->
  <div>
    {{ foo }}<span
    id="id"
    style="width: 20px">span content</span>
  </div>
</template>

Under the mustache expression, the formatting result of webstorm is missing two spaces.

How should I set up to make the two results consistent?

Thanks!