Webstorm doesn't recognize Vue.js component tags

I have a basic Title component I use:

<template>
  <div class="title">
    <h1 class="title-h1">'Allo, 'Allo!</h1>
    <div>
      <img class="title-logo" src="http://fountainjs.io/assets/imgs/yeoman.png"/>
      <img class="title-logo" src="http://fountainjs.io/assets/imgs/fountain.png"/>
    </div>
    <h2 class="title-h2">Always a pleasure scaffolding your apps.</h2>
  </div>
</template>

<script>
export default {
  name: 'Title'
};
</script>

Here it used by a Vue instance:

<template>
  <div id="root">
      <title-component></title-component>
  </div>
</template>

<script>
import Title from './Title.vue';

export default {
  name: 'Main',
  components: {
    'title-component': Title
  }
};
</script>

Problem is that Webstorm is not recognizing it as an html tag:

Things I've tried:

• Download vue, vue-resource, vue-router community stubs
• Using Vue.js plugin
• Just to be on the safe side, since it's an ES6 app, I've enabled ES6 for the project 
• 

Environment:

Os: Windows 10 64bit

Webstorm version: 2016.2.3