vue component without template

It's a hack to find all child components and mount them using existing html.

HTML

<div id="app">
    Some page content: <span v-text="title"></span>
    
    <div class="component snippet" data-component="snippet">
        <p>Snippet content: <span v-text="msg"></span></p>
    </div>
</div>

JavaScript

var Snippet = Vue.extend({
  el: function() {
    return '.component.snippet';
  },
  data: function () {
    return {
      msg: 'Hello! I\'m snippet!'
    }
  },
  ready: function() {
    console.log('snippet ready');
    setTimeout(function() {
      this.msg = 'I like Vue!'
    }.bind(this), 2000);
  }
});

Vue.component('snippet', Snippet);

var app = new Vue({
  el: '#app',
  data: {
    title: 'Hello Vue.js!'
  },

  beforeCompile: function() {
    var components = document.querySelectorAll('[data-component]');
    var name, el, ctor, component;
    for (var i = 0, max = components.length; i < max; i++) {
      el = new components[i];
      name = el.dataset['component'];
      ctor = Vue.component(name);
      if (ctor) {
        component = new ctor();
      }
    };
  }
});