Conditionally applying classes on Livewire form validation failure | Livewire | Page 1

I have an input and a label, and i am conditionally applying classes based on if error is set or not:

<label :for="id"
           class="block text-sm font-medium leading-5 {{ $error ? 'text-red-500 font-semibold' : 'text-slate-700' }}"
           x-text="label"></label>

    <div class="relative mt-1">
   ...
        <input
            wire:key="search-input"
            x-ref="search"
            x-show="isSearching"
            :aria-hidden="isSearching ? 'true' : 'false'"
            x-model="search"
            @keydown="doSearch()"
            @click="toggle()"
            role="combobox"
            aria-controls="options"
            :aria-expanded="isOpen ? 'true' : 'false'"
            class="w-full rounded-md border bg-white py-2 pl-3 pr-12 shadow-sm focus:outline-none focus:ring-1 sm:text-sm {{ $error ? 'border-red-500 focus:ring-red-500 focus:border-red-500 placeholder-red-500' : 'border-slate-300 focus:ring-indigo-500 focus:border-indigo-500' }}"
        >

but for some reason even though the html seems to be modified with the correct classes when error is set by livewire, the input doesn't get the styles, only the label does

#Conditionally applying classes on Livewire form validation failure