title: Close and Reopen a parent div in a vue js for loop
body: <pre><code>&lt;div&gt;
    &lt;b-card-group :columns=&quot;layout == 'masonry'&quot; :deck=&quot;layout == 'grid'&quot;&gt;
      &lt;b-card
          v-for=&quot;(image, imageIndex) in images&quot;
          :key=&quot;imageIndex&quot;
          :img-src=&quot;image&quot;
          img-top&gt;
      &lt;/b-card&gt;
    &lt;/b-card-group&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I'm using VueJS to render this component. I have an array of image URLs in <code>images</code> data, I'm looping it over in a  component (Bootstrap Card), what I want is, I want to close the parent <code>&lt;b-card-group/&gt;</code> for every third iteration of the loop and reopen it again so that I can have a group of 3 <code>&lt;b-card/&gt;</code> inside 1 <code>&lt;b-card-group/&gt;</code></p>
  <p>So for 9 images, I will end up with 3 <code>&lt;b-card-group/&gt;</code> and 3 <code>&lt;b-card/&gt;</code> in each block.</p>
  <p>How do I achieve this in Vue JS?</p>