title: VueJs Async loading templates
body: <p>I Am building my first VueJs App and I want to asynchronous load my template. In our framework we have our templates stored in a database, that's why. 
  It is working until I have some nested dom-elements in my template without any data bound to it. So my my Vuejs is like:</p>
  
  <pre><code>var app = new Vue({
    el: '#app',
    data: {
      finish: false,
      template: null
    },
    render: function(createElement) {
      if (!this.template) {
        return createElement('div', 'loading...');
      } else {
        return this.template();
      }
    },
    mounted() {
      var self = this;
      $.post('myUrl', {foo:'bar'}, function(response){
        var tpl = response.data.template;
        self.template = Vue.compile(tpl).render;
      })
    }
  })
  </code></pre>
  
  <p>This is working when my template is like:</p>
  
  <pre><code>&lt;div v-show="!finish"&gt;
    &lt;p&gt;Test&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But when it's like this:</p>
  
  <pre><code>&lt;div v-show="!finish"&gt;
    &lt;p&gt;
      &lt;span&gt;Test&lt;/span&gt;    
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I get </p>
  
  <blockquote>
    <p>[Vue warn]: Error in render: "TypeError: Cannot read property '0' of
    undefined" (found in &lt; Root >)</p>
  </blockquote>
  
  <p>But when it's like this:</p>
  
  <pre><code>&lt;div v-show="!finish"&gt;
    &lt;p v-show="!finish"&gt;
      &lt;span&gt;Test&lt;/span&gt;    
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It's working again.</p>
  
  <p>Can anyone explain what is happening here? And is this the right way to do it or should I do it an other way?</p>