nuxtjs button component has several size style with tailwindcss. cannot use different size in one place. all are getting the lagest button size

I'm use nuxt.js and tailwindcss for this. create a common button component that can use in several ares with different sizes (sm -> small, md -> medium, lg -> large). but once I use all the sizes in one page every button get lagest one's size. there is no size difference. below is the nuxtjs component. it's call "lefticonbutton.vue"

<template>
    <button :class="[
        'flex flex-row gap-4 justify-center font-[Sora] shadow-sm hover:bg-[#A2AA7F] hover:text-[#F9F8F3] border text-[#C1AA7F] border-[#C1AA7F] bg-[#F9F8F3]',
        sizesCalButton
    ]">
        <icon class="" :size="sizesCalIcon" :name="iconName" v-if="iconName !== 'none'"></icon>
        <span class="">{{ name }}</span>
    </button>
</template>

<script setup>

const props = defineProps({
    name: {
        type: String,
        default: 'No name'
    },
    sizes: {
        type: String,
        default: 'md',
        validator: (value) => ['sm', 'md', 'lg'].includes(value)
    },
    iconName: {
        type: String,
        default: 'none',
    }
})

const sizesCalButton = computed(() => {
    if (props.sizes == 'lg') return 'py-3 px-5 rounded-lg text-lg'
    else if (props.sizes == 'md') return 'py-2 px-5 rounded-md text-md'
    else if (props.sizes == 'sm') return 'py-1 px-4 rounded-sm text-sm'
    else return 'py-1 px-1 rounded-lg text-lg'
})

const sizesCalIcon = computed(() => {
    if (props.sizes == 'sm') return '1.2rem'
    else if (props.sizes == 'md') return '1.4rem'
    else return '1.6rem'
})

</script>

this is how I use this in one of my page

<template>
    <div class="">
        <Lefticonbutton name="small" size="sm" iconName="mynaui:home"></Lefticonbutton>
        <Lefticonbutton name="medium" size="sm" iconName="mynaui:home"></Lefticonbutton>
        <Lefticonbutton name="large" size="lg" iconName="mynaui:home"></Lefticonbutton>
    </div>
</template>

below is the reference image of the output

how to correct this?

You pass a size attribute to the component, but inside the component you refer to the property as sizes.

Adjust the component or its usage according to the correct logic. I think size seems more logical, so I would rename sizes to size. It's important that the properties inside the component always match the attribute keys expected as input.