vuetify разделитель вертикали не удалось

Question

Я хочу добавить вертикальный разделитель vuetify сверху вниз, как этот пользовательский интерфейс. В моем коде я не знаю, почему вертикаль v-divider - это всего лишь маленькая линия, которую вы видите на изображении ниже.

Мой HTML код:

<div id="app">
  <v-layout row pt-4>
      <v-flex>
        <v-card>
          <v-card-title>
            <v-layout row>
              <v-flex xs12 md2>
                <span class="subheading font-weight-bold">
                  Conversion
                </span>
                <v-divider vertical></v-divider>
              </v-flex>

              <v-flex xs12 md1>
                <span class="body-2 font-weight-bold">
                  Innerpack
                </span>
              </v-flex>
              <v-flex xs12 md1>
                <span class="body-2 font-weight-bold">
                  Multipack
                </span>
              </v-flex>
              <v-flex xs12 md1 pl-2>
                <span class="body-2 font-weight-bold">
                  Piece
                </span>
              </v-flex>
            </v-layout>
          </v-card-title>
          <v-divider></v-divider>
          <v-layout column>
            <v-layout row>
              <v-flex pt-3 pb-3 md2>
                <span class="body-2 pl-3">1 Carton</span>
              </v-flex>
              <v-flex pt-3 pb-3 md1>
                <span class="body-1 pl-3 text-md-center">10</span>
              </v-flex>
              <v-flex pt-3 pb-3 md1>
                <span class="body-1 pl-3 text-md-center">100</span>
              </v-flex>
              <v-flex pt-3 pb-3 md1>
                <span class="body-1 pl-3 text-md-center">1000</span>
              </v-flex>
            </v-layout>
            <v-divider></v-divider>
            <v-layout row>
              <v-flex pt-3 pb-3 md2>
                <span class="body-2 pl-3">1 Innerpack</span>
              </v-flex>
              <v-flex pt-3 pb-3 md1>
                <span class="body-1 pl-3 text-md-center">-</span>
              </v-flex>
              <v-flex pt-3 pb-3 md1>
                <span class="body-1 pl-3 text-md-center">10</span>
              </v-flex>
              <v-flex pt-3 pb-3 md1>
                <span class="body-1 pl-3 text-md-center">100</span>
              </v-flex>
            </v-layout>
            <v-divider></v-divider>
            <v-layout row>
              <v-flex pt-3 pb-3 md2>
                <span class="body-2 pl-3">1 Multipack</span>
              </v-flex>
              <v-flex pt-3 pb-3 md1>
                <span class="body-1 pl-3 text-md-center">-</span>
              </v-flex>
              <v-flex pt-3 pb-3 md1>
                <span class="body-1 pl-3 text-md-center">-</span>
              </v-flex>
              <v-flex pt-3 pb-3 md1>
                <span class="body-1 pl-3 text-md-center">10</span>
              </v-flex>
            </v-layout>
          </v-layout>
        </v-card>
      </v-flex>
    </v-layout>
</div>

Мой JS (vue) код:

new Vue({
  el: '#app',
  data () {
    return {
      card_text: 'Lorem ipsum dolor sit amet, brute iriure accusata ne mea. Eos suavitate referrentur ad, te duo agam libris qualisque, utroque quaestio accommodare no qui. Et percipit laboramus usu, no invidunt verterem nominati mel. Dolorem ancillae an mei, ut putant invenire splendide mel, ea nec propriae adipisci. Ignota salutandi accusamus in sed, et per malis fuisset, qui id ludus appareat.'
    }
  }
})

Что не так в моем коде? Что мне делать?