使用vue3在<script setup>里面实现六个按钮，用到flex-warp:warp并且在点击其中一个按钮的时候该按钮的背景颜色变为blue，其他按钮颜色不变

你可以参考下面的代码实现：

<template>
  <div class="buttons">
    <button v-for="(item, index) in buttonList"
            :key="index"
            :class="{active: activeIndex === index}"
            @click="activeIndex = index">
      {{ item }}
    </button>
  </div>
</template>

<script setup>
const buttonList = ['Button 1', 'Button 2', 'Button 3', 'Button 4', 'Button 5', 'Button 6'];
let activeIndex = null;
</script>

<style scoped>
.buttons {
  display: flex;
  flex-wrap: wrap;
}
button {
  flex: 1 1 calc(33.33% - 10px);
  margin: 5px;
  padding: 10px;
  background-color: #eee;
  border: none;
  outline: none;
  cursor: pointer;
}
button.active {
  background-color: blue;
  color: #fff;
}
</style>

在上面的代码中，我们首先定义了一个 `buttonList` 数组，里面包含了六个按钮的文本。然后使用 `let activeIndex = null` 定义了一个变量 `activeIndex` 用于记录当前选中的按钮的下标，初始值为 `null`。

在模板中，我们使用 `v-for` 指令遍历 `buttonList` 数组，生成六个按钮，并且使用 `:class` 绑定一个对象，判断当前按钮是否是选中状态。如果 `activeIndex === index`，则添加 `active` 类，让该按钮的背景颜色变为蓝色。同时，我们使用 `@click` 监听按钮的点击事件，将当前按钮的下标赋值给 `activeIndex` 变量，从而更新选中的按钮。

最后，我们在样式中设置了按钮的基本样式，并且为选中状态的按钮添加了 `active` 类的样式，用于修改背景颜色为蓝色。注意，我们使用了 `scoped` 关键字来限定样式只作用于当前组件中的元素。这样做可以避免样式污染，提高了组件的复用性。