Vue.component('task-list', {

template:  `

<div><slot>

    <task v-for="task in tasks" :key="task.key">  {{task.description}}</task>

</slot></div>

`,

data () {

    return {

        tasks: [

                {description:"Go to market", completed:false, key:"asd"},

                {description:"Wake up ", completed:true, key:"rty"},

                {description:"Sleep", completed:false, key:"terw"},

                {description:"Have breakfast", completed:true, key:"jdr"},

        ]

    };

},

});

Vue.component('task', {

   template: `<li><slot></slot></li>`

});