Собственно вопрос в заголовке темы. Есть вот такой код (работаю со vue).
<div class="col-xl-12 your-choice-list-block">
<ul class="your-choice-list" v-for="slide in listIcons" :key="icon_id" :style="{ listStyleImage: `url(${slide.icon_img})`, backgroundPosition: 'center' }">
<li class="
your-choice-item">
<div class="list-title" v-for="item in listTitles" :key="title_id">{{item.title}}</div>
</li>
</ul>
</div>
C помощью первого цикла я итерирую разные иконки (которые находятся в массиве объектов) списка ul. Цель сделать всё динамическим. Когда я итерирую иконки, соответственно и блоков ul становятся столько же сколько иконок (6шт). Теперь вот, например, мне нужно добавить заголовки к этим спискам. Они тоже естественно разные, они тоже в массиве объектов. И когда я их итерирую внутри ul, получается концепт "ёлки". То бишь вложенные циклы получается, а мне нужно чтобы они работали раздельно, но находясь внутри друг друга))). Можно ли как то это реализовать или есть другой путь? Спасибо за внимание.