Vue: создать макет столбца, используя v-for

Question

У меня есть массив элементов, и я хотел бы создать макет, как показано ниже в Vue. Этот вопрос решает проблему частично, однако в моем случае мне нужно 1 + 3 + 3. Любая помощь приветствуется.Спасибо!

Соответствующий код

<div v-if="posts.length">
  <post-list
     v-for="post in posts"
     :key="post.id"
     :post="post"
     :size="post.media_414x276"
  />
</div>

  computed: {
    posts() {
      return this.$store.getters.requestedItems(this.request)
    }
  },
  methods: {
    getPosts() {
      return this.$store.dispatch('getItems', this.request)
    }
  },
  created() {
    this.getPosts()
  }

Редактировать:

Возможно иметь свойство totalItems в данных и вычислять столбцы соответственно.

Требуемый вывод html

<div class="row">
    <div class="col s12 m4">
       <div>Item 1</div>       
    </div>
    <div class="col s12 m4">
       <div>Item 2</div>
       <div>Item 3</div>
       <div>Item 4</div>       
    </div>
    <div class="col s12 m4">
       <div>Item 5</div>
       <div>Item 6</div>
       <div>Item 7</div>       
    </div>  
    <div class="col s12 m4"> <!-- repeat if more items  --> 

    </div> 
</div>