Estou tentando renderizar uma lista de objetos da minha Instância Vue. Cada objeto deve usar um componente, então eu o coloco no v-for-loop. Mas tudo o que recebo élist.title elist.text em vez dos valores corretos.

Existe uma maneira especial de usar componentes nos v-for-loops?

Eu achei istotópico no Vue-Forum, mas não sabe como usá-lo ou se é o caminho certo.

Aplicativo:

<div id="app">
    <div v-for="list in lists">
        <listcard title="list.title" text="list.text"></listcard>
    </div>
</div>

Modelo:

<template id="listcard-template">
    <div class="card">
        <h2>{{ title }}</h2>
        <p>{{ text }}</p>
    </div>
</template>

Meu componente:

Vue.component('listcard', {
    template: '#listcard-template',
    props: ['title', 'text']
})

Instância Vue:

new Vue({
    el: "#app",
    data: {
        lists: [
            {title: "title1", text: "text1"},
            {title: "title2", text: "text2"},
            ...
        ]
    }
})

Obrigado!