Computed properties con Options API

Para el caso de la primer propiedad computed se puede escribir en código de la siguiente forma:

  computed: {
    price_color() {
      const colorRojo = "rgb(104, 104, 209)";
      const colorAzul = "rgb(188, 30, 67)";
      const isLessThanTwo = this.product.stock <= 1;
      return isLessThanTwo ? colorAzul : colorRojo;
    }
  }

Lo que permite que sea mas declarativo tu código y fácil de leer

Una propiedad computada SIEMPRE tiene que retornar un valor. A mi me gusta llamarlas variables reactivas porque siempre que algo que da el valor de dicha propiedad cambie, el valor se va a actualizar.
.
Vue buscará aquellas variables reactivas que se usen dentro de la propiedad computada y las estará vigilando para que cada que cambien la computed property se re-ejecute.
.
¿Cuándo usar un computed o un watcher?
.
Depende, si solo necesitas desencadenar una acción cuando una propiedad cambie de valor sin tener que modificar ninguna otra propiedad, entonces puedes usar un Watcher.
.
Si necesitas modificar una propiedad cada vez que alguna otra cambie, entonces puedes usar una computed.
.
Algo que el profesor Jorge Baumann siempre decía: “¿Cuándo usar una computed? Siempre que puedas” jaja, se refiere a si usar una computed o usar un método ^^
.
Dejo el códigon de la clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/f5fe75f04ba634b83721eb7b55accad4ab7139ef

En el caso de tener que hacer una llamada a un API para la búsqueda de un un producto ¿lo haríamos con una computada? ¿Si/No, Por qué?.

No me ha quedado claro el que casos debería de usar el watch. ¿Podrías poner algún caso real en el que sea mejor usar el watch?. Muchas gracias.

Las computed properties son las que crean una nueva propiedad reactiva, basada en sus dependencias. Son funciones que siempre retornan un valor.

yo veo videos de Vue2 y me parece una forma de codear tan hermosa jajjajaja.
Ahora tengo q entrar al carro de composition jajaja aun no le cojo amor jajaja xD

Una forma más elegante de escribir el if else:

computed: {
    description_color() {
      return this.product.stock <= 1 ? 'rgb(255, 0, 0)' : 'rgb(104, 104, 209)'
    }
  }