title: Component not rendering when using vue-template
body: <p>I have the following...</p>
  
  <p>main.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;header&gt;&lt;/header&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {}
  &lt;/script&gt;
  </code></pre>
  
  <p>header.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;{{ message }}&lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          data: () =&gt; {
              return {
                  message: 'Dashboard'
              }
          }
     };
  &lt;/script&gt;
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>import Vue from 'vue';
  import Header from './header.vue'
  import App from './main.vue'
  Vue.component("header", Header);
  new Vue(App).$mount('#km-viewport')
  </code></pre>
  
  <p>But when I run this the header component is never rendered. What am I missing? Does using the vue-template webpack plugin require something special here?</p>
  
  <p>I have looked at a couple similar stack overflows and I have tried to use <code>components: { Header }</code> instead but that still doesn't work. </p>
  
  <p>I also tried...</p>
  
  <p>main.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;header&gt;&lt;/header&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import Header from './header.vue'
      export default {
        components:{
          "header": Header
        }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>header.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;{{ message }}&lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          data: () =&gt; {
              return {
                  message: 'Dashboard'
              }
          }
     };
  &lt;/script&gt;
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>import Vue from 'vue';
  import App from './main.vue'
  Vue.component("header", Header);
  new Vue(App).$mount('#km-viewport')
  </code></pre>