Tengo un problema simple con respecto a devolver un valor de una función y mostrarlo dentro de la etiqueta de la plantilla en Vue js. Dentro de la función, obtuve el valor del color, pero cuando lo muestro en la plantilla, me sale una cadena vacía, mi pregunta es cómo puedo actualizar el valor del color en la función y corregirlo con el valor de la función.

 <script setup> import {ref, watch} from 'vue'; import { ColorPicker } from 'vue-color-kit'; import 'vue-color-kit/dist/vue-color-kit.css' let color = ref(''); let suckerCanvas = ref(null); let suckerArea = ref([]); let isSucking = ref(false); const changeColor = (color) => { const { r, g, b, a } = color.rgba; console.log(r,g,b,a + " RGBA VALUE"); color.value = `rgba(${r}, ${g}, ${b}, ${a})`; console.log(color + " COLOR VALUE"); } console.log(color.value); </script> <template> <div class="row"> <div class="col-md-4"> <color-picker theme="dark" :color="color" :sucker-hide="false" :sucker-canvas="suckerCanvas" :sucker-area="suckerArea" @changeColor="changeColor" @openSucker="openSucker" /> </div> <div class="col-md-4"></div> <div :style="{background: suckerCanvas}" class="col-md-4"></div> <div :key="color">{{'The color is + ' + color}}</div> </div> </template>