vue.js & bootstrap でいい感じにオブジェクトを配置できなかった話

<div class="container">
  <div class="row">

    <div class="col-3">
      <p> hoge </p>
    </div>
    <div class="col-3">
      <p> hoge </p>
    </div>

  </div>
</div>

みたいな感じだとしっかりとグリッドシステムが機能するけど

<div class="container">
  <div class="row">

    <div v-for="i in 2">
      <div class="col3">
        <p> hoge </p>
      </div>
    </div>

  </div>
</div>

こんな感じだと機能しなかった．

9/26追記

<div class="container">
  <div class="row">

    <div class="col3" v-for="i in 2">
      <p> hoge </p>
    </div>

  </div>
</div>

これだと動作した．