Tailwind dynamic color class doesn't work

<script setup lang="ts">
import colors from '../../ui.config'

withDefaults(defineProps<{
    title: string,
    color?: keyof typeof colors,
    icon?: string,
}>(), {
    color: 'blue',
})
</script>

<template>
    <div :class="colors[$props.color!]" class="border-l-4 rounded-l-sm rounded-r-md space-y-2 px-4 py-3">
        <h4 class="flex items-center space-x-2 text-inherit font-semibold">
            <Icon v-if="icon" :name="icon" class="w-4 h-4 inline-block" />
            <span>{{ title }}</span>
        </h4>
        <slot />
    </div>
</template>

<script setup lang="ts">
import colors from '../../ui.config'

withDefaults(defineProps<{
    title: string,
    color?: keyof typeof colors,
    icon?: string,
}>(), {
    color: 'blue',
})
</script>

<template>
    <div :class="colors[$props.color!]" class="border-l-4 rounded-l-sm rounded-r-md space-y-2 px-4 py-3">
        <h4 class="flex items-center space-x-2 text-inherit font-semibold">
            <Icon v-if="icon" :name="icon" class="w-4 h-4 inline-block" />
            <span>{{ title }}</span>
        </h4>
        <slot />
    </div>
</template>

export default {
    blue: 'border-l-blue-500 bg-blue-100 text-blue-500',
    red: 'border-l-red-500 bg-red-100 text-red-500',
    green: 'border-l-green-500 bg-green-100 text-green-500',
    yellow: 'border-l-yellow-500 bg-yellow-100 text-yellow-500'
}

export default {
    blue: 'border-l-blue-500 bg-blue-100 text-blue-500',
    red: 'border-l-red-500 bg-red-100 text-red-500',
    green: 'border-l-green-500 bg-green-100 text-green-500',
    yellow: 'border-l-yellow-500 bg-yellow-100 text-yellow-500'
}