使用 vue.js 如何使用嵌套了另一个按钮框的按钮框显示不同的数据？

Question

就像这张图片。所以我有一个带有一层

controls

的

buttons

组件，我需要在另一个部分使用它，如图所示。但在这种情况下（图像），要求如果按下一个按钮，它会显示其他按钮。做这个的最好方式是什么？非常感谢！

我的控件组件：

<template>
    <div class="controls">
        <span v-for="(topic, i) in topics" :key="i" :class="{ active: currentIndex === i }" @click="currentIndex = i">
        </span>
    </div>
</template>

我不知道从哪里开始，但它就像嵌套在另一个按钮组件中的按钮组件