Как динамически передавать данные FOR LOOP в компонент Vue через шаблон Django?

Question

Я все еще новичок в Vue, и мне нужно передать данные цикла в компонент Vue через шаблон Django, но я не знаю, как именно.

На моей html-странице я зацикливаю компонент Vue с помощью Django, например:

{% for employee in object_list %}

<app-card name={{ employee.name }} skills-all={{ employee.skils.all }} skill={{ employee.skils.all.name }}></app-card>

{% endfor %}

Примечание: навыки-все это список со списками навыков, и я просто хотел просмотреть все навыки и показать все навыки имена в моем списке HTML

И мой компонент Vue выглядит так:

<template>
    <div id="card">
        <h1>{{ name }}</h1>
        <ul>
            <li v-for="skill in skillsAll">{{ skill }}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: ["name", "skillsAll", "skill"]
    };
</script>

Все работает отлично, пока я не попытаюсь сделать это для цикла внутри компонента vue. На самом деле я очень смущен как я должен зациклить что-то внутри Vue, когда данные должны поступить извне компонента