¿Cuándo un composable reutilizable mejora el diseño y cuándo solo es una bolsa de efectos secundarios?

La mejor forma de responder "¿Cuándo un composable reutilizable mejora el diseño y cuándo solo es una bolsa de efectos secundarios?" en Vue es separar mecanismo técnico, criterio de uso y señales de revisión.

La respuesta mejora cuando explicas qué parte del problema resuelves ahora con arquitectura en Vue para "Cuándo un composable reutilizable mejora el diseño y cuándo solo es una bolsa de efectos secundarios", qué dejas derivado en composables y cómo detectarías pronto que la solución empieza a quedarse corta.

Qué evalúa el entrevistador

• Si distingues qué parte de "Cuándo un composable reutilizable mejora el diseño y cuándo solo es una bolsa de efectos secundarios" pertenece a arquitectura y cuál debería resolverse en composables.
• Si conviertes la respuesta en criterios observables: límites claros, impacto en el mantenimiento y forma de detectar regresiones.
• Si separas decisiones reversibles de irreversibles y justificas la arquitectura por velocidad de cambio, no por preferencia personal.

Respuesta sólida

• Empieza por el borde del problema: dominios, módulos o responsabilidades que hoy cambian a ritmos distintos en Vue.
• Justifica dónde pondrías las fronteras, qué acoplamientos aceptarías al principio y qué señal te haría revisar la decisión.
• Cierra con un criterio de validación real: coste de cambio, tiempo de entrega, número de puntos tocados o incidencias evitadas.

Compromisos y errores comunes

• Abrir más capas de las necesarias suele esconder la lógica importante y hacer más lenta la entrega sin resolver el acoplamiento real.
• Una arquitectura que nadie del equipo puede explicar en una pizarra rara vez aguanta bien el paso del tiempo.

Ejemplo de código

No se trata de memorizar esta implementación, sino de enseñar cómo ordenar el flujo de arquitectura en Vue sin mezclar responsabilidades ni perder de vista composables.

<script setup lang="ts">
import { computed, ref } from 'vue';

const query = ref('');
const products = ref(['Vue', 'Pinia', 'Vitest']);
const filteredProducts = computed(() =>
  products.value.filter((product) => product.toLowerCase().includes(query.value.toLowerCase())),
);
</script>

<template>
  <input v-model="query" placeholder="Buscar" />
  <ul>
    <li v-for="product in filteredProducts" :key="product">{{ product }}</li>
  </ul>
</template>

En entrevista yo usaría un ejemplo de este tamaño para "Cuándo un composable reutilizable mejora el diseño y cuándo solo es una bolsa de efectos secundarios": suficiente para demostrar criterio y lo bastante pequeño como para discutir riesgos y variantes sin perderse.

Ejemplo o caso real

Un caso creíble para "¿Cuándo un composable reutilizable mejora el diseño y cuándo solo es una bolsa de efectos secundarios?" aparece cuando una funcionalidad de Vue mezcla arquitectura con composables y el equipo empieza a tocar demasiados puntos para un cambio pequeño. Ahí conviene probar la solución sobre una pantalla o flujo acotado, medir si reduce fricción y solo después extender el patrón.

Frase corta de entrevista

En "Cuándo un composable reutilizable mejora el diseño y cuándo solo es una bolsa de efectos secundarios" me interesa más mantener una fuente de verdad clara y una validación honesta que sonar sofisticado.