vue js css modules are giving the same names to elements in each rendering

Question

I am working on a vue project and I made CSS as modules so that I can assign different class names to different elements.

But the component containing the CSS module is rendering multiple times like:

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

the button group component renders the buttons like this

 <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>

It assigns class names like

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

But I want different class names in each rendering of same component