Que funciona:

Quiero representar un elemento solo si algún valor booleano es verdadero usando Vue 3. Este es un ejemplo siguiendo la documentación de Vue 3 y funciona bien:

Modelo:

 ... <div id="btnReady" @click="ready = !ready"> <img v-if="!ready" src="ready.svg" alt="" /> <img v-else src="unready.svg" alt="" /> </div> ...

Guion:

 <script setup> import { ref } from "vue"; let ready = ref(false); </script>

Lo que no entiendo:

Eso tiene mucho sentido para mí, excepto que realmente no entiendo la necesidad de ref() . Leí la documentación al respecto y realmente no entendí cómo/por qué vue requiere una inicialización como esta let ready = ref(false) y por qué usar let ready = false no reaccionará a los cambios en la variable ready .

Qué no funciona:

Además de alternar un valor booleano, el controlador onclick también debería realizar otras acciones. Entonces, en lugar de alternar el valor como este onclick="ready = !ready" quiero llamar a una función onclick="toggleReady" . El valor de ready se alternará dentro de la función y se ejecutarán algunas otras acciones. La función se ejecuta al hacer clic correctamente, pero Vue NO reacciona a los cambios de la variable ready y la declaración v-if no "funciona" correctamente -> el elemento aún está visible.

Modelo:

 <div id="btnReady" @click="toggleReady"> <img v-if="!isReady" src="ready.svg" alt="" /> <img v-else src="unready.svg" alt="" /> </div>

Guion:

 <script setup> import { ref } from "vue"; let ready = ref(false); let toggleReady = () => { ready = !ready; // do some more stuff }; </script>

¿Alguien puede explicarme este comportamiento y cómo puedo solucionarlo?

PD: también intenté usar una propiedad computed en la instrucción v-if en lugar de una variable normal. no funciono...