Can I use ES6 syntax within my HTML file?

Hello all,

I'm using a custom file type .vue that combines CSS, HTML, and ES6 Javascript into one file. It looks something like this...

<style>
.red {
  color: #f00;
}
</style>

<template>
  <h2 class="red">{{msg}}</h2>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello from Component D!'
    }
  }
}
</script>

When I set the File Type of *.vue files to be HTML, the <style> and <template> tags are recognized by Webstorm, but the Javascript within the <script> tag is not (expects ES5 Javascript instead). When I set the File Type to be ECMAScript 6, the Javascript within the <script> tag is recognized but everything else is not. Setting the Template Data Language to be either HTML or ECMAScript 6 for my *.vue files seems to have no effect.

My Javascript level is set to ECMAScript 6 on a project level.

What's the correct way of combining these three languages into one file so that Webstorm recognizes the syntax of each?

Edit: I've also tried setting the <script> tags into type="babel" or "ecmascript-6"... it gets rid of the errors, but as soon as I change anything in the Javascript, the red lines reappear.