Почему не работает toggle между кнопками New и Archive?

Я хочу чтоб первые две кнопки просто имели цвет которые я задал, а две остальные кнопки которые рядом цвет переключался с черного на белый или наооборот.

App.vue

<template>
    <div class="button-container">
        <Button
            buttonLabel="Click me"
            :statusCondition="true"
            buttonColor="blue"
            :clickHandler="handleClick"
            :isActive="true"
        />

        <Button
            buttonLabel="Hesabatlar"
            :statusCondition="true"
            :buttonColor="'black'"
            :clickHandler="handleClick"
            :isActive="true"
        />
 <div class="buttons">


    <Button
            buttonLabel="New"
            :statusCondition="true"
            buttonColor="black"
            :clickHandler="handleClick"
            :isActive="true"
        />

        <Button
            buttonLabel="Archive"
            :statusCondition="true"
            :buttonColor="'black'"
            :clickHandler="handleClick"
            :isActive="false"
        />
</div>   

 <div class="buttons">
      <Button 
        buttonLabel="New" 
        :isActive="isButtonNewActive" 
        @toggleIsActive="() => toggleButtonState(1)" 
        speacialButtonColor="black" 
      />
      <Button 
        buttonLabel="Archive" 
        :isActive="isButtonArchiveActive" 
        @click="toggleButtonState(2)" 
        speacialButtonColor="white" 
      />
    </div>
      
    </div>
</template>

<script setup lang="ts">
import Button from './components/Button.vue'

import { ref } from 'vue';

const isButtonNewActive = ref(true);
const isButtonArchiveActive = ref(false);

const toggleButtonState = (buttonIndex) => {
  if (buttonIndex === 1) {
    isButtonNewActive.value = true;
    isButtonArchiveActive.value = false;
  } else if (buttonIndex === 2) { 
    isButtonNewActive.value = false;
    isButtonArchiveActive.value = true;
  }
};

const handleClick = () => {
    console.log('Кнопка нажата!')
}
</script>

<style scoped>
.button-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
  
}

.buttons{
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin-top: 20px;
}
</style>

Button.vue

<template>
    <button
        v-if="showButton"
        :class="buttonClass, specialButton"
        @click="handleClick"
        type="button"
    >
        <span>{{ buttonLabel }}</span>
    </button>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps(['buttonLabel', 'isActive', 'statusCondition', 'clickHandler', 'buttonColor', 'speacialButtonColor'])

const showButton = computed(() => {
    return props.statusCondition === true
})



const buttonClass = computed(() => {
  return `bg-${props.buttonColor} ${props.isActive ? 'blue text-white' : 'bg-gray-500'} rounded-lg text-white`;
});

const specialButton=computed(()=>{{
  return `bg-${props.speacialButtonColor} ${props.isActive ? 'black-500 text-white' : 'white-500 text-black'} rounded-lg text-white`;
}})

/* 
const handleClick = () => {
    if (props.clickHandler) {
        props.clickHandler()
    }} 
  */
    const handleClick = () => {
  if (props.clickHandler) {
    props.clickHandler(); 
  }
  $emit('toggleIsActive'); 
};
</script>


<style scoped>
  button {
    height: 48px; 
    padding: 12px 16px;  
    border-radius: 12px;  
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px; 
    white-space: nowrap;  
  }
  
  button:hover {
    opacity: 0.9; 
  }
  </style>