SOURCE

var app = new Vue({
    el: '#app',
    data() {
        return {
            list: [
                1,
                2,
                3,
                2,
                2,
                3
            ]
        }
    },
})

<div class="box">
	<div class="card">
		<div>1</div>
	</div>
	<div class="card">
		<div>2</div>
		<div>2</div>
	</div>
	<div class="card">
		<div>3</div>
		<div>3</div>
		<div>3</div>
	</div>
	<div class="card">
		<div>4</div>
		<div>4</div>
	</div>
	<div class="card">
		<div>5</div>
	</div>
	<div class="card">
		<div>6</div>
		<div>6</div>
		<div>6</div>
	</div>
</div>

<div class="box2">
	<div class="card2">
		<div>1</div>
	</div>
	<div class="card2">
		<div>2</div>
		<div>2</div>
	</div>
	<div class="card2">
		<div>3</div>
		<div>3</div>
		<div>3</div>
	</div>
	<div class="card2">
		<div>4</div>
		<div>4</div>
	</div>
	<div class="card2">
		<div>5</div>
	</div>
	<div class="card2">
		<div>6</div>
		<div>6</div>
		<div>6</div>
	</div>
</div>

<div id="app">
	<div class="box3">
		<div v-for="(x,xindex) in 2" :index="x" class="card3">
			<div v-for="(l,index) in list" :index="l" v-if="index%2==xindex">
                <div v-for="(s,sindex) in l" :index="s">
                    {{index+1}}
                </div>
            </div>
		</div>
	</div>
</div>

.box {
    border: 1px solid #ccc;
    width: 500px;
    column-count: 2;
    column-gap: 0;
}

.card {
    width: 50%;
    font-size: 12px;
}

.box2 {
    border: 1px solid #ccc;
    width: 500px;
    font-size: 0;
    overflow: hidden;
    clear: both;
}

.card2 {
    font-size: 12px;
    width: 50%;
    float: left;
}

.box3{
    border: 1px solid #ccc;
    width: 500px;
    display:flex;
}
.card3{
    flex:1;
    word-break: break-all;
}