lazy watcher does not execute

Question

I am new vuejs.as shown in the below posted code, the isBtnDigitizePolygonClicked is a reactive variable.i am trying to execute some lines of code as a side effect to the change of the value of isBtnDigitizePolygonClicked. for that reason, i used watch as shown below in the code.

the problem i am encountring now, is when the code is executed, and despite the methosonDigitizePolygon is called, the log messages in the watched variable isBtnDigitizePolygonClicked never shows up as if the watcher did not execute

please let me know why that is happening and how to solve it.

code:

let isBtnDigitizePolygonClicked = ref(true);
...
... 
watch: {
    isBtnDigitizePolygonClicked(newVal, oldVal) {
        console.log(debugTag, 'newVal:', newVal);
        console.log(debugTag, 'oldVal:', oldVal);
        if (digitizePolygonInteractions) {
            if (newVal == true) {
                digitizePolygonInteractions.remove();
            } else {
                digitizePolygonInteractions.add();
            }
        } else {
            throw new Error('WTF.digitizePolygonInteractions is:');
        }
    },
    immediate: false,
},
computed: {
    compPropsIsBtnDigitizePolygonDisabled() {
        if (isBtnDigitizePolygonClicked.value == true) {
            return values.CONST_STRING_DIGITIZE;
        } else {
            return values.CONST_STRING_STOP_DIGITIZE;
        }
    },
},
methods: {
    onDigitizePolygon() {
        console.info(debugTag, 'onDigitizePolygon()');
        isBtnDigitizePolygonClicked.value = !isBtnDigitizePolygonClicked.value;
    },
}

template:

<button @click="onDigitizePolygon()">{{ compPropsIsBtnDigitizePolygonDisabled }}</button>

Answer 1

i think my mistake was, that i did not add the isBtnDigitizePolygonClicked to the return of the `data()'

code:

data() {
    return {
        isBtnDigitizePolygonClicked,
    }
}