index.js

var HelloWorld = Vue.component('HelloWorld', {
    props: {
        msg: String
    },
    template: 
    '<div class="hello">' +
        '<h1>{{msg}}</h1>' +
        '<p>' +
        'For a guide and recipes on how to configure / customize this project,<br>' +
        'check out the' +
        '<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.' +
        '</p>' +
        '<h3>Installed CLI Plugins</h3>' +
        '<ul>' +
        '<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>' +
        '<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>' +
        '</ul>' +
        '<h3>Essential Links</h3>' +
        '<ul>' +
        '<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>' +
        '<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>' +
        '<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>' +
        '<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>' +
        '<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>' +
        '</ul>' +
        '<h3>Ecosystem</h3>' +
        '<ul>' +
        '<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>' +
        '<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>' +
        '<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>' +
        '<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>' +
        '<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>' +
        '</ul>' +
    '</div>',
});

var home = Vue.component('Home', {
    render: function(h) {
        const helloWorlds = [];
        for (var i = 0; i <= 100; i++) {
            helloWorlds.push(h(HelloWorld, {
                props: {
                    msg: 'Welcome to Your Vue.js App'
                }
            }))
        }

        return h('div', {
            class: 'about'
        }, [
            h('h1', 'This is a Home page'),
            helloWorlds
        ])
    }
})

var about = Vue.component('About', {
    render: function(h) {
        const helloWorlds = [];
        for (var i = 0; i <= 100; i++) {
            helloWorlds.push(h(HelloWorld, {
                props: {
                    msg: 'Welcome to Your Vue.js App'
                }
            }))
        }

        return h('div', {
            class: 'about'
        }, [
            h('h1', 'This is an about page'),
            h('img', {
                attrs: {
                    src: 'https://vuejs.org/images/logo.png'
                }
            }),
            helloWorlds
        ])
    }
})

var app = new Vue({
    el: '#main',
    data: {
        comp: about
    },
    render: function(h) {
        console.log(this.comp);
       return h('div', {
        attrs: {
          id: 'cul',
        }
      }, [
          h(this.comp)
        ])
    },
    mounted: function() {
        // setInterval(function() {
        //     this.comp = this.comp === home
        //         ? about
        //         : home;
        //     }, 500);
        setInterval(function(){ 
            this.comp = this.comp === home
                ? about
                : home;
         }.bind(this), 500);
    }
})