SOURCE

        var componentA = {
            props: ['aTitle'],
            template: `<div>{{aTitle}}</div>`,
        }
        var componentB = {
            props: ['bList'],
            template: `<div><div v-for="item in bList" :key="item.uname">{{item.uname}}</div></div>`
        }
        var componentC = {
            props: ['cContain'],
            template: `<div>{{cContain}}</div>`
        }

        Vue.component('my-component', {
            template: `
                <div>
                    <component-a :aTitle="aTitle"></component-a>
                    <component-b :bList="bList"></component-b>
                    <component-c :cContain="cContain"></component-c>
                </div>
                `,
            components: {
                'component-a': componentA,
                'component-b': componentB,
                'component-c': componentC,
            },
            data: function () {
                return {
                    aTitle: 1,
                    bList: [{
                        uname: 'mike',
                        like: 'play'
                    }, {
                        uname: 'jonh',
                        like: 'play'
                    }],
                    cContain: 'swim'
                }
            }
        })
        new Vue({
            el: '#app',
            data: {

            }
        })

    <div id="app">
        <my-component></my-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>