reactive()

En lo personal me gusta más reactive() porque me recuerda más al Options API (con el que aprendí Vue) y me evito de usar el .value jaja.
.
Como sugerencia, para no tener que estar agregando el productState en todos los lugares donde se usaban como product, lo que podemos hacer es destructurar a productState:

const productState = reactive({
	product: {
		// Todas las propiedades
	}
});

const { product } = productState;

De esa forma solo tenemos que preocuparnos por eliminar el .value de los lugares donde usamos el product 😄
.
Dejo el código de esta clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/00104f44d8218c87260936de79fa4c5407562526

Ya me estaba acostumbrando al .value jejeje, pero me gusta cómo se ve usando Reactive, parece algo más ordenado

Si usamos ref(), tenemos que acceder a los valores de las variables/constantes que definamos con .value
Y retornar al final cada una de las variables, constantes y funciones.

Usando reactive(), agrupamos elementos en un contenedor, por lo que para acceder a los elementos dentro de este contenedor, tendremos que acceder a travez de este, como si de un objeto se tratase.
Además tendremos que retornar cada uno de los elementos que conforma esta agrupación, usando ...toRef(nombre_de_nuestro_grupo) por cada grupo que tengamos.

Para convertir un objeto reactivo a una referencia, utilizamos la función toRefs que provee vue. Para hacelo,es de la siguiente forma

return {
…toRefs(objeto);
}

Esto se realiza dentro de la función setup del composition.

en este punto me confundi un poco, pero voy a avanzar y si algo vuelvo a la clase despues

Las funciones tambien pueden agruparse dentro de la variable reactiva, con lo que sólo es necesario hacer return de estas.

const cartState = reactive({
            cart: [],
            cartOpen: false,
            cartQuantity: 0,
            addToCart: ()=>{
              const prodIndex = cartState.cart.findIndex(prod => prod.name === productState.product.name)
              if(prodIndex >= 0){
                cartState.cart[prodIndex].quantity += 1;
              }else{
                cartState.cart.push(productState.product);
              }
              cartState.cartQuantity += 1;
              productState.product.stock -= 1;
            }
          })

s

Me había gustado más solo con ref() y acostumbrarse al .value jaja pero bueno en organización puede ser mejor reactive().