v-ons-lazy-repeat error: "createItemContent" must return an instance of Element

Question

I’m getting this error in my code and I don’t know what’s wrong. I tested something similar in the https://onsen.io/v2/api/vue/v-ons-lazy-repeat.html test area and it worked but when I put it in my own code it doesn’t work. No matter what I tried to do it kept on throwing "createItemContent" must return an instance of Element but the sample code in the onsenui page only shows that I must put the element code inside the "template" of the new Vue object.

This is the code for my component:

<template>
<v-ons-dialog :visible.sync="showDialog">
    <v-ons-page>
        <v-ons-list>
            <v-ons-lazy-repeat :render-item="renderExistingItems" :length="selectedItems.length"></v-ons-lazy-repeat>
        </v-ons-list>
        <v-ons-modal :visible="loading">
            <v-ons-progress-circular indeterminate></v-ons-progress-circular>
        </v-ons-modal>
    </v-ons-page>
</v-ons-dialog>
</template>

<script>
import Vue from 'vue';

export default{
    name:'dialog_item',
    data(){
        var self=this;
        return{
            newItem:'',
            existingItems:[],
            renderExistingItems:index=>new Vue({
                template:'<v-ons-list-item :key="index" @click="itemSelected(itemName)" tappable>{{itemName}}</v-ons-list-item>',
                data(){
                    return{
                        index:index
                    };
                },
                computed:{
                    itemName(){
                        return this.index<self.selectedItems.length?self.selectedItems[this.index]:'';
                    }
                },
                methods:{
                    itemSelected(itemName){
                        self.$emit('itemSelected',itemName);
                        self.newItem='';
                        self.showDialog=false;
                    }
                }
            }),
            loading:false,
            showDialog:false
        };
    },
    computed:{
        selectedItems(){
            return !this.existingItems||this.existingItems.length<=0?[]:this.existingItems.filter(item=>item.trim().toLowerCase().includes(this.newItem.trim().toLowerCase()));
        }
    },
    methods:{
        addItem(){
            var newItemTrim=this.newItem.trim();
            if(newItemTrim===''){
                this.$ons.notification.toast({message:'No item entered',timeout:2000});
                return;
            }
            this.$emit('itemSelected',newItemTrim);
            this.newItem='';
            this.showDialog=false;
        },
        async show(){
            this.loading=true;
            existingItems=await ...//some code to load the items from DB...
            this.loading=false;
            this.showDialog=true;
        },
        itemSelected(itemName){
            this.$emit('itemSelected',itemName);
            this.newItem='';
            this.showDialog=false;
        }
    }
};
</script>