CIcon "icon" not updating content

[igoohd]

In my nuxt app when I have a case that I want to change the icon according to a ref, but, even if the prop of CIcon (icon) is changing it doesn't update the content and re-render CIcon with the new value.

<template>
  <span class="tw-ml-2 tw-self-center">
    <CIcon
      :icon="currentIcon"
      size="xl"
      class="tw-cursor-pointer !tw-text-gray-500 tw-select-none"
      @click="togglePasswordVisibility"
    />
  </span>
</template>

<script lang="ts" setup>
const emit = defineEmits(['toggleInputType'])

const isHidden = ref(true)

const currentIcon = computed(() => {
  return isHidden.value ? cilLockLocked : cilLockUnlocked
})

const togglePasswordVisibility = () => {
  isHidden.value = !isHidden.value
  emit('toggleInputType')
}
</script>