title: vue js - can't find child component template
body: <p>After reading the vue.js docs I just jumped into components.<br />
  I want to create a custom (local) input component that emits an event to the parent on <code>keyup</code>, but I have two problems. (see code example at the end of the post)</p>
  <p><strong>[solved] 1. I already get an error when I register the child component that says</strong></p>
  <pre><code>[Vue warn]: Failed to mount component: template or render function not defined.
  
  found in
  
  ---&gt; &lt;InputTest&gt;
         &lt;Root&gt;
  </code></pre>
  <p>I guess it's a complete no-brainer, but I just don't get it.</p>
  <p><strong>[solved] 2. The child event doesn't even fire</strong><br />
  Before abstracting and simplyfing the code for this question I tried to create the same behaviour with single-file (.vue) components. With SFCs the template compiles / mounts successfully, but the child component events doesn't fire. Obviously I can not tell for sure if this problem will occur in my provided example as well, but I'd guess so.</p>
  <p><strong>EDIT 1: Solved problem 1</strong><br />
  My child-component should be an object instead of a vue instance. I updated the code for that. I also changed the <code>onChange</code> method from lambda to function, as <code>this</code> doesn't point to the vue instance in a lambda.</p>
  <p><strong>EDIT 2: Solved problem 2</strong></p>
  <blockquote>
  <p><a href="https://v2.vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components" rel="nofollow noreferrer">There may be times when you want to listen for a native event on the root element of a component.</a></p>
  </blockquote>
  <p>Apparently the native modifier can only be used on components and not on native elements. Removing the modifier fixed the problem. I changed the code accordingly.</p>
  <p><strong>CODE</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const inputText = {
          data () {
              return {
                  model: ''
              }
          },
          template: '&lt;input type="text" v-model="model" @keyup="onChange"&gt;',
          methods: {
              onChange: function () {
                  this.$emit('update', this.model);
              }
          }
      };
  
      const app = new Vue({
          el: '#app',
          data () {
              return {
                  txt: ''
              }
          },
          methods: {
              onUpdate: function(txt) {
                  this.txt = txt;
              }
          },
          components: {
              'input-text': inputText
          }
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue@2.5.13/dist/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
      &lt;input-text @update="onUpdate"&gt;&lt;/input-text&gt;&lt;br&gt;
      {{ txt }}
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>