vue.js - Vue three columns of checkboxes in Bootstrap 4

Question

Can anyone help me here with a 3 column layout via vue-js in bootstrap-4. I want to get my checkboxes displaying as 3 columns. The users are in order and I want the order going down the first column, then down the second and finally the third.

<div v-for="(user, index) in users">
  <div class="{'controls' : (index % (users.length/3)===0)}">
    <input type="checkbox" :id="'user_'+user.id" :value="user.id" class="form-check-input" v-model="form.checkedUsers">
    <label class="form-check-label" for="'user_'+userr.id">
      <img :src="user.photo_url" class="small-photo mx-2"> @{{ user.first_name }} @{{ user.last_name }}
    </label>
  </div>
</div>

Thanks