vue.js - vue js css 模块在每次渲染中为元素赋予相同的名称

Question

我正在开发一个 vue 项目，并且我制作了 CSS，modules以便我可以为不同的元素分配不同的类名。

但是包含 CSS 模块的组件会多次渲染，例如：

     <ButtonGroup
      v-for="(i, index) in buttons"
      :key="index"
      :label="i.label"
      :buttons="i.names"
      class="mt-3"
    ></ButtonGroup>

按钮组组件像这样呈现按钮

 <button
        v-for="(i, index) in buttons"
        :key="index"
        type="button"
        @click="changeClass"
        class="btn"
        :class="[index < 1 ? [$style.active, $style.btnNew] : [$style.btnNew]]"
      >
        {{ i }}
      </button>

它分配类名，如

src-components-inputs-buttonGroup---active---PEcjn src-components-inputs-buttonGroup---btn-new---3RluI

但我希望在同一组件的每次渲染中使用不同的类名