Inactive bystanders do not act

Question

I'm new to vuejs. As shown in the code below, isBtnDigitizePolygonClicked is a reactive variable. I'm trying to execute some code as a side effect when the value of isBtnDigitizePolygonClicked changes. For this I used watch as shown below.

The problem I have now is that when the code executes, the log message in the observed variable isBtnDigitizePolygonClicked never shows up, despite the onDigitizePolygon method being called, It's as if the observer is not executing.

Please tell me why this happens and how to fix 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

Using options-api, you can directly write:

data() {
    return {
        isBtnDigitizePolygonClicked: true,
    }
}

The content in

data() {..} will be automatically responsive. Therefore, there is no need to use

let isBtnDigitizePolygonClicked = ref(true);

Answer 2

I think my mistake was that I didn't add isBtnDigitizePolygonClicked to the return value of `data()`

Code:

data() {
    return {
        isBtnDigitizePolygonClicked,
    }
}