JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<div id="app">
  <input type="number" v-model.number="columns" min="2" max="7">
  <div class="columns">
    <ul v-for="col in columnItems">
      <li v-for="n in col">{{ n }}</li>
    </ul>
  </div>
</div>

CSS

.columns {
  display: flex;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    columns: 3,
    items: [...Array(60).keys()],
  },
  computed: {
    columnItems() {
      const { items, columns } = this;
      const colSize = Math.ceil(items.length / columns);
      return [...Array(columns)].map((n, i) => items.slice(i * colSize, (i + 1) * colSize));
    },
  },
});