Estoy creando un componente Vue <Link> dentro de NuxtJS con la nueva sintaxis API de composición. Me gustaría configurar automáticamente el color de mi UiIcon cuando la raíz de la plantilla tiene la clase disabled .

Primero pensé en este enfoque, pero luego me di cuenta de que en el método de configuración, el DOM aún no estaba accesible. ¿Cuál podría ser otra solución viable?

PD: Logré resolverlo usando el atributo de stroke CSS porque UiIcon es un SVG, pero tenía curiosidad por saber si había otra solución que utilizara el color pop ya definido.

 <template> <div ref="row" class="row"> <UiIcon v-if="linkIcon" :type="linkIcon" :color="linkIconColor" class="icon" /> <a class="link" :href="linkHref" :target="linkTarget" :rel="linkTarget === 'blank' ? 'noopener noreferrer' : null" @mouseover="linkActive = true" @mouseout="linkActive = false" > <slot></slot> </a> </div> </template> <script lang="ts"> import { defineComponent, computed, ref, toRefs, } from '@nuxtjs/composition-api'; import { Colors } from '~/helpers/styles'; export default defineComponent({ name: 'Link', props: { href: { type: String, default: undefined, }, target: { type: String as () => '_blank' | '_self' | '_parent' | '_top', default: '_self', }, icon: { type: String, default: undefined, }, iconColor: { type: String, default: undefined, }, iconHoverColor: { type: String, default: undefined, }, }, setup(props) { const { href, target, icon, iconHoverColor } = toRefs(props); const linkActive = ref(false); const row = ref<HTMLDivElement | null>(null); const linkIconColor = computed(() => { const linkDisabled = row.value?.classList.contains('disabled'); if (linkDisabled) { return Colors.DARK_GREY; } if (linkActive.value && iconHoverColor.value) { return props.iconHoverColor; } return props.iconColor; }); return { linkHref: href, linkTarget: target, linkIcon: icon, linkIconColor, linkActive, }; }, }); </script>