Print element after component at some point when iterating through array in Vue.js

I have an array and i’m looping through it and printing a component in every iteration.
I want to print a html element AFTER the third component printed and i’m only able to print it INSIDE the component…

<div class="grid">
            <component
                :is="item.component"
                v-for="(item, i) in items"
                :index="i"
                :key="item.id"
                :image="item.image"
                :to="item.to"
                :image-secondary="item.imageSecondary"
                :title="item.title"
                :date="item.date"
                :talent="item.talent"
                :excerpt="item.excerpt"
                class="block"
            />
            <p v-if="i === 2">PRINTED AFTER 3RD COMPONENT</p>
        </div>

I’ve tried to wrap the

tag inside the but (obviusly) it prints the

inside the 3rd component, and that’s what i don’t need. I need it after it.

I thought maybe the only solution is to make a dettach and attach with JS but I find it very ugly and bad practice

My idea, in PHP would be something like:

if($items){
$count = 0;
 foreach($items as $item){
  echo $item;
  if($count == 2){
   echo '<p>some text</p>';
  }
  $count++;
}

That’s the idea

Thanks