How to add individual wrappers to the elements passed to the slot?

Question

Vue.js

Imagine that there is such a standard App.vue file

<template>
  <MyComponent>
    // внутри компонента MyComponent мы вставляем N-ое количество блоков:
    <div>Блок 1</div>
    <div>Блок 2</div>
    <div>Блок 3</div>
    ...
    <div>Блок N</div>    
  </MyComponent>
</template>

And in the "MyComponent" component, it looks something like this:

<template>
  <div class="block-wrapper">
    <slot/>
  </div>
</template>


// Итоговый результат будет такой:
<template>
  <div class="block-wrapper">
    <div>Блок 1</div>
    <div>Блок 2</div>
    <div>Блок 3</div>
    ...
    <div>Блок N</div> 
  </div>
</template>

As you can see, all the blocks fit inside the block tag with the "block-wrapper" class.

But is it possible to make the end result look like this:

<template>
  // Блок с классом block-wrapper оборачивает каждый блок по отдельности
  <div class="block-wrapper">
    <div>Блок 1</div>
  </div>
  <div class="block-wrapper">
    <div>Блок 2</div>
  </div>
  <div class="block-wrapper">
    <div>Блок 3</div>
  </div>
  ... 
  <div class="block-wrapper">
    <div>Блок N</div>
  </div>
  
</template>

It turns out that somehow you need to get an array of elements that are located inside “MyComponent”
and use v-for to do what I need. But how to get this array of elements?

Answer 1

through the render function
UPD. Taken from the comments:

the code can be changed under vue 3, right?

Yes