Computed

Codigo de esta clase

<template>
  <div>{{ fullname }}</div>
</template>

<script>
import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("Dufainder");
    const lastName = ref("Bedoya");

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    return {
      fullName,
    };
  },
};
</script>

Lo iba a dejar como pregunte, pero ya encontré la respuesta en la doc y es qué ¿cuál es el sentido de las funciones computadas vs una función normal utilizando vanila?
.
Bueno según la documentación de Vue …la diferencia es que las propiedades computadas se almacenan en caché según sus dependencias y tiene sentido. XD
También dice Una propiedad computada solo se volverá a evaluar cuando alguna de sus dependencias haya cambiado

Otra forma de hacerlo, me parece que el código queda un poco más limpio, ¿qué opinan?

<template>
  <h2>{{ fullName }}</h2>
</template>

<script>
import { ref, computed } from "vue"

export default {
  setup() {
    const firstName = ref("John")
    const lastName = ref("Doe")

    return {
      fullName: computed(() => `${firstName.value} ${lastName.value}`)
    }
  }
}
</script>

Entonces con la funcion setup(){} hacemos todo lo que haciamos con options API pero de una forma digamos “manual” pero más sencillo. Solo es acostumbrarse a ya no declarar las variables en data sino usar ref o reactive