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> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Using options-api, you can directly write:
data() { return { isBtnDigitizePolygonClicked: true, } }The content indata() {..}will be automatically responsive. Therefore, there is no need to useI think my mistake was that I didn't add
isBtnDigitizePolygonClickedto the return value of `data()`Code:
data() { return { isBtnDigitizePolygonClicked, } }