vue/test/functional/fixtures/component.html

<div id="test">
    <!-- v-component + v-with -->
    <div id="component-and-with" v-component="my-avatar" v-with="user"></div>

    <!-- custom element + v-with -->
    <my-avatar id="element-and-with" v-with="user"></my-avatar>

    <!-- v-with with default Ctor -->
    <div id="with" v-component v-with="user">{{hi}} {{name}}</div>

    <!-- v-component alone -->
    <div id="component" v-component="my-element"></div>

    <!-- custom element alone -->
    <my-element id="element"></my-element>

    <!-- v-with + binding sync -->
    <div id="with-sync" v-component v-with="childHi:hi, childName:user.name">
        {{childHi}} {{childName}}
    </div>

    <!-- conditional component -->
    <div id="conditional" v-component="{{ok ? 'my-element' : 'nope'}}"></div>

    <!-- this one will change everything for everyone else... -->
    <div id="component-with-sync" v-component="sync" v-with="childHi:hi, childName:user.name"></div>

    <!-- conditional component with v-repeat! -->
    <div class="repeat-conditional {{type}}" v-repeat="items" v-component="{{type}}"></div>
</div>

<script src="../../../dist/vue.js"></script>
<script>

    // Vue.config({
    //     debug: true
    // })

    Vue.component('my-avatar', {
        template: '{{hi}} {{name}}'
    })

    Vue.component('my-element', {
        template: '{{hi}} {{user.name}}'
    })

    Vue.component('sync', {
        template: '{{childHi}} {{childName}}',
        ready: function () {
            // should sync back to parent
            this.childHi = 'hello'
            this.childName = 'Vue'
        }
    })

    Vue.component('nope', {
        template: 'NOPE'
    })

    var app = new Vue({
        el: '#test',
        data: {
            ok: true,
            hi: '123',
            user: {
                name: 'Jack'
            },
            items: [
                { type: 'my-element' },
                { type: 'nope' }
            ]
        }
    })
</script>