Я пытаюсь отобразить список объектов из моего экземпляра Vue. Каждый объект должен использовать компонент, поэтому я помещаю его в цикл v-for. Но все, что я получаю, этоlist.title а такжеlist.text вместо правильных значений.

Есть ли особый способ использовать компоненты в циклах v-for?

я нашел этонить в Vue-Forum, но не знаю, как использовать это или если это правильный путь.

Приложение:

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

Шаблон:

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

Мой компонент:

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

Вью-Instance:

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

Спасибо!