How to make nested loops work independently of the outer one?

Question

Vue.js

Actually the question is in the topic title. There is such a code (I work with 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>

With the first loop, I iterate through the different icons (which are in an array of objects) of the ul list. The goal is to make everything dynamic. When I iterate the icons, respectively, there are as many ul blocks as there are icons (6 pieces). Now, for example, I need to add headers to these lists. They are also naturally different, they are also in the array of objects. And when I iterate them inside ul, I get the concept of a "Christmas tree". That is, nested loops are obtained, but I need them to work separately, but being inside each other))). Can this be done somehow or is there another way? Thank you for your attention.