Usar pipes para mutar textos en Vue 3

Ahora que estoy pasando todos mis proyectos a Vue 3 me encontré con algo que aunque no me gusto mucho fue fácil acostumbrarme, es el tema de usar los clásicos pipes para filtrar o mutar valores que usaba en Vue 2 e incluso en Angular lo hacía de una manera similar.

Les pongo el caso, cuando tenía por ejemplo una fecha que venía de un Api y quería mutarla para que se mostrará de una manera agradable para el usuarios en Vue 2 solía recurrir a los “pipes” para crear una función generalista que le pudiera aplicar a todos los parámetros que compartieran ese formato de esta manera:

<template>
 <h1>Mutar Fecha</h1>
 <p>{{ miFecha | fechaParaHumanos }}</p>
</template>


<script>
 export default {
   data() {
     return {
       miFecha: new Date()
     }
   },
   filters: {
     fechaParaHumanos(fecha) {
       return new Date(fecha).toLocaleString()
     }
   }
 }
</script>

El “pipe” | fechaParaHumanos lo hacía todo por mi, pero ahora en Vue 3 esta opción ha sido removida, y en cambio tenemos la opción filter con lo que debemos aplicar ahora la mutación de la siguiente manera:

const fechaHumana = computed(() => {
 return new Date(fecha).toLocaleString()
})

Y en nuestro template invocamos directamente a nuestro valor como una propiedad

<p class="ml-2 text-xs text-gray-500 grow">
  {{ fechaHumana }}
</p>

Aunque esto pueda verse extraño es fácil acostumbrarse a usarlo, sin embargo encuentro un problema con la generalización y por lo mismo encontrar una solución particular que (a mi parecer) puede ser más eficiente sin embargo no he visto pruebas de rendimiento para saber si es o no una buena idea, la cosa sería simplemente tener una función que haga la mutación e invocar con el valor desde nuestro código así:

const fechaHumana = (fecha: string) => {
 return new Date(fecha).toLocaleString()
}

Y la invocamos desde el template simplemente así:

<p>
   {{  fechaHumana(fecha) }}
</p>

Espero que les sirva y si es así, dejen algún comentario. xD