title: Error in v-on handler: "TypeError: Cannot read property '$createElement' of undefined"
body: <p>I have a problem with very simple input/output code.<br>
  I am supposed to get a input in Newick format and then use this to create a tree.<br>
  But I am nowhere close to even getting input right.</p>
  
  <p>Here is my HTML code</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body class="sidebarBody"&gt;
    &lt;div class="inputDiv"&gt;
      &lt;div class="inputText"&gt;
        &lt;textarea v-model="newick" class="newickIn" placeholder="Newick Format"&gt;&lt;/textarea&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;button @click="render()"&gt;Render&lt;/button&gt;
      &lt;p&gt;{{newick}}&lt;/p&gt;
      &lt;p&gt;{{wtf}}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Here is my JavaScript code</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
  export default {
    name: "Sidebar",
    data() {
      return {
        newick: "",
        wtf: "wtf"
      };
    },
    methods: {
      render() {
        this.wtf = this.newick;
        console.log(this.newick);
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I used wtf as my debugger but even that did not helped me to figure out what I am doing wrong.</p>
  
  <p>Here are the errors:</p>
  
  <p>Error1</p>
  
  <pre><code>    vue.esm.js?efeb:628 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property '$createElement' of undefined"
  
      found in
  
      ---&gt; &lt;Sidebar&gt; at src/components/Sidebar.vue  
             &lt;Main&gt; at src/components/Main.vue  
               &lt;App&gt; at src/App.vue  
                 &lt;Root&gt;
  </code></pre>
  
  <p>Error 2</p>
  
  <pre><code>    vue.esm.js?efeb:1897 TypeError: Cannot read property '$createElement' of undefined
      at render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-7d622f5c","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&amp;index=0!./src/components/Sidebar.vue (0.84f365116a0d985da83b.hot-update.js:14), &lt;anonymous&gt;:3:16)
      at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-7d622f5c","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&amp;index=0!./src/components/Sidebar.vue (0.84f365116a0d985da83b.hot-update.js:14), &lt;anonymous&gt;:38:22)
      at invokeWithErrorHandling (vue.esm.js?efeb:1863)
      at HTMLButtonElement.invoker (vue.esm.js?efeb:2188)
      at HTMLButtonElement.original._wrapper (vue.esm.js?efeb:7559)
  </code></pre>
  
  <p><strong><em>So my problem here is that even though (in my opinion) I used @click right and created a method in right order, the code has error about how my newick model is undefined. I tried a real simple example for using vue binding and method usage (which is below) and that worked so I really do not know that is wrong with my code.</em></strong></p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;div class="tree"&gt;
          &lt;button @click="counter()"&gt;Count&lt;/button&gt;
          &lt;p&gt;{{count}}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: "Visualization",
    data() {
      return {
        count: 0
      };
    },
    methods: {
      counter(){
        this.count++;
      }
    }
  };
  &lt;/script&gt;
  </code></pre>