Vue3 + vuetifyでトグルっぽいボタン

トグルボタンだと横並びで縦並びができない。
できそうで、できない。きー！くやしー！。
今から別UIに変更するか。嫌だなぁ。
仕方がないので、トグルボタンを自前で実装。

<script setup lang="ts">
import {ref,Ref} from "vue";
const select:Ref<string> = ref("");
const buttonDataList:ButtonData[] = [
{
    label:"button1",
    value:"1",
    active:false,
  },
  {
    label:"button2",
    value:"2",
    active:false,
  },
  {
    label:"button3",
    value:"3",
    active:false,
  },
  {
    label:"button4",
    value:"4",
    active:false,
  },
];
const clickHandler = (value:string):void =>
{
  const n:number = buttonDataList.length;
  for(let i:number = 0;i<n;i++)
  {
    const buttonData:ButtonData = buttonDataList[i]
    if(value == buttonData.value)
    {
      buttonData.active = true;
      select.value = buttonData.value
    }
    else{
      buttonData.active = false
    }
  }
}
interface ButtonData
{
  label:string
  value:string
  active:boolean
}
</script>
<template>
  <v-app>
    <v-main>
      <div>select : {{select}}</div>
      <div v-for="buttonData in buttonDataList" :key='buttonData.value' @click="clickHandler(buttonData.value)">
        <div class="btn-container">
          <v-btn :active="buttonData.active">
            {{buttonData.label}}
          </v-btn>
        </div>
      </div>
    </v-main>
  </v-app>
</template>
<style scoped>
.btn-container
{
  margin: 10px;
}
</style>

あとはなんとかなりそう