How can I change the rendering order of Vue components?

Question

Vue.js

There is some pattern. The Card component iterates 50 objects from the Products array. All cards are in a div with class card-columns.
It is necessary, approximately, in the middle to insert a component with advertising, that is, Selection


Rendering always goes in order
First, cards with products, and then a block with advertising, I would like to find a solution to this problem.
In my understanding, it should look something like this
Card
Card
Card
Card
Selection
Card
Card
Card
Card

Answer 1

Head-on solution:
Divide in products into 2 parts. products1 and products2 and display in the template Product block1 / Advertisement / Product block2

Answer 2

<Card ... />
if (idx === 25) {
  // Вывод рекламы
}