Nested components in Vue.js

What works and what doesn't.

HTML

<div id="app">
    <outer>
<!--         <step1 name="first">This works</step1>
        <step1 name="second">Item 2</step1> -->
    </outer>
    
    
<!--     <b>&lt;step&gt; as a sub component of &lt;wizard&gt;:</b>
    <wizard2>
        <step2 name="first">This fails</step2>
        <step2 name="second">Item 2</step2>
    </wizard2>
    
    <hr/> -->

<!--     <b>Separate top level components with communication:</b>
    <wizard3>
        <step title="We communicate"></step>
        <step title="Item 2"></step>
    </wizard3> -->
    
    <div id='output'>
    
    </div>
</div>

JavaScript

// OPTION 1
Vue.component('outer', {
    template: '<ul @keyup.space="escape"><inner></inner> </ul>',
    methods: {
      escape() {
        out('Escaped outer');
      },
    }
});
Vue.component('inner', {
    template: '<li @keyup.space="escape">Inner <ul> <inside></inside></ul></li>',
    methods: {
      escape() {
        out('Escaped inner');
      },
    }
});

Vue.component('inside', {
    template: '<li @keyup.space="escape">Inside</li>',
    methods: {
      escape() {
        out('Escaped inside');
      },
    }
    
});

function out()
{
    var args = Array.prototype.slice.call(arguments, 0);
    document.getElementById('output').innerHTML += args.join(" ") + "\n";
}


// OPTION 2
/* Vue.component('wizard2', {
    template: '<ul> <content></content> </ul>',
    components: {
        'step2': {
            props: { name: { type: String, required: true } },
            template: '<li id="wizard-step-{{name}}"> <content></content> </li>'
        }
    }
}); */

// OPTION 3
/* Vue.component('wizard3', {
    data: function() {
        return { children: [] }
    },
    events: {
        'register-step': function(child) {
            this.children.push(child.title);
            console.log(this.children);
      }
    },
    template: '<ul> <content></content> </ul> <p>Wizard\'s data: {{$data | json }}</p>',
});
Vue.component('step', {
    props: {
        title: { type: String, required: true }
    },
    created: function()  { this.$dispatch('register-step', this) },
    template: '<li> {{title}} </li>',
});
 */
var app = new Vue({ el: '#app' });