vuejs-sample-code-dynamic-component

HTML:

<nl-test inline-template>
    <div>
        <div v-on:click="increase"> increase here please </div><br><br>
        <div v-on:click="decrease"> decrease here please </div>
        <ul>
            <li v-for="(value, key) in getItems()" :key="key">
                printing
                <component :is="getItem()" :key="key"></component>
                <nl-test inline-template>
                    <div>
                        this is a test here
                    </div>
                </nl-test>
            </li>
        </ul>
    </div>
</nl-test>

Javascript:
var testComponent = {
    template: `<span>{[ string ]}</span>`,
    props: ['value'],
    computed: {
        string: function () {
            return 'this is a test';
        }
    },
    data: function() {
        return {
            counter: 1,
            items: {0: 0}
        };
    },
    created: function () {
        console.log('test created');
    },
    mounted: function () {
        console.log('test mounted');
    },
    destroyed: function () {
        console.log('test destroyed');
    },
    methods: {
        getItems: function () {
            console.log('get items');
          return this.items;
        },
        getItem: function () {
            console.log('get item');
            return {
                template: '<div>this is simply a test</div>',
                destroyed: function () {
                    console.log('inner test destroyed');
                },
                methods: {

                }
            };
        },
        increase: function () {
            console.log('increasing counter, current value is ', this.counter);
            console.log('setPath3', this.items, [this.counter]);
            this.$set(this.items, this.counter, this.counter);
            this.counter++;
        },
        decrease: function () {
            console.log('decreasing counter, current value is ', this.counter);
            console.log('setPath4', this.items, [this.counter]);
            this.counter--;
            this.$delete(this.items, this.counter);
        }
    }
};