I have a simple problem regarding returning a value from a function and displaying it inside the template tag in Vue js. Inside the function, I got the value of color but when I display it in the template I go empty string, my question is how I can update the color value in the function and over right it with the function value?

<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>