Как мне перебирать массив во Vue вдвое реже, чем есть элементы?

У меня есть массив данных:

[
  {
    type: select, 
    options: [foo, bar], 
    label: foo, 
    required: true
  }, 
  {
    type: text, 
    options: [],
    label: bar, 
    required: false
  }, 
  {
    type: checkbox, 
    options: [], 
    label: baz, 
    required: true
  }
]

и шаблон Vue:

<b-row>
  <b-col>
    <label :for = "{{label}}">{{ label }}<span class = "required" v-if = "required"/></label>
    {{ checks type and injects proper form element here }}
  </b-col>
</b-row>

Я пытаюсь выяснить, как лучше всего перебрать каждый объект и поместить каждый в свой собственный <b-col>, только с двумя столбцами в строке, чтобы он выглядел как следующая структура:

<b-row>
  <b-col>
    <label for = "size">foo<span class = "required" v-if = "required"/></label>
    <b-form-select id = "size">
      <options>foo</options>
      <options>bar</options>
    </b-form-select>
  </b-col>
  <b-col>
    <label for = "size">bar<span class = "required" v-if = "required"/></label>
    <b-form-text id = "size"/>
  </b-col>
</b-row>
<b-row>
  <b-col>
    <label for = "size">baz<span class = "required" v-if = "required"/></label>
    <b-form-select id = "size"/>
  </b-col>
    <label for = "size">barbaz<span class = "required" v-if = "required"/></label>
    <b-form-select id = "size"/>
  </b-col>
</b-row>
...etc.

Я изо всех сил пытаюсь найти лучший подход, чтобы сделать это чисто и в стиле vue.