trigger watch function in Vue 3 composition Api

I have set this reactive value inside the setup

const refValue = ref('foo');

and set a watch function to it

     watch(refValue, function() {
       console.log("activaded")
    
    });

the watch function gets not activated if I manually change the value,

it gets only activated if a add a function which changes the value

 const changeValue = function changedValue() {
      console.log("fired");

      return refValue.value = 12;
    }

why does watch only gets triggered when using a function to change the value,
I thought that const refValue = ref('foo'); is reactive so watch should detect all changes

import { ref,watch } from 'vue';

export default {
  setup() {
    
    const refValue = ref('foo');
 

     watch(refValue, function() {
       console.log("activaded")
    
    });

    const changeValue = function changedValue() {
      console.log("fired");

      return refValue.value = 12;
    }



    return {
      refProp: refValue,
      changeFuncton: changeValue
     
    };
  },

};

Answer

Try out immediate option and use a function as first parameter that returns the observed property :

   watch(()=>refValue, function() {
       console.log("activaded")
    
    },{immediate:true});

Advertisement

Answer