Nested components in Vue.js

What works and what doesn't.

by simati

HTML

<div id="app">
    <app></app>
</div>

JavaScript

var CompB = {
  name: 'comp-b',
  props: ['level'],
  template: `<div>
    B{{level}}
    <div v-if="level<1111">
      <comp-a :level="level+1"></comp-a>
    </div>
  </div>`,
  created () {
    this.$options.components['comp-a'] = Vue.extend(CompA)
  }
};
var CompA = {
  name: 'comp-a',
  props: ['level'],
  template: `<div>
    A{{level}}
    <div v-if="level<1111">
      <comp-b :level="level+1"></comp-b>
    </div>
  </div>`,
  components: {
    CompB
  }
};
var App = {
  template: '<div>Start<comp-a level="1"></comp-a></div>',
  components: {
    CompA
  }
};

var app = new Vue({
  el: '#app',
  components: {
    App
  }
});