VueJS nested components

For completeness I will post the answer to my own question here.

All the credit goes to Joseph Silber and Jeff

Code from main.js

var myComponent = Vue.extend({    template: '#my-component',    data: function() {        return {            objects: []        }    },    created: function() {        this.$http            .get('/get_objects')            .then(function(objects) {                this.objects = objects.data;            }        );    }});var myComponentChild = Vue.extend({    template: '#my-component-child',    props: ['item'],    data: function() {        return {            item: {}        }    }});Vue.component('my-component', myComponent);Vue.component('my-component-child', myComponentChild);new Vue({    el: 'body',});

Code from index.html

<my-component></my-component><template id="my-component">    <table>        <thead>            <tr>                <th>Name</th>                <th>URL</th>            </tr>        </thead>        <tbody>            <tr is="my-component-child" v-for="item in objects" :item="item"></tr>        </tbody>    </table></template><template id="my-component-child">    <tr>        <td></td>        <td>{{ item.name }}</td>        <td>{{ item.url }}</td>    </tr></template>