Amrmsmb's questions

Estou usando o Vue 3 com API de opções.

Conforme mostrado no código postado abaixo, no watchobjeto, eu monitoro as alterações ocorridas em isToggleBtnLabelDigitizePolygon. No método onDigitizePolygoneu mudo o valor de isToggleBtnLabelDigitizePolygon, porém, quando o valor deste último é alterado, a propriedade computada compPropsIsToggleBtnDigitizePolygoné executada indicando a mudança de isToggleBtnLabelDigitizePolygon, mas o watcher isToggleBtnLabelDigitizePolygonnunca é executado, ou seja, as declarações de log dentro desse watcher nunca são executadas .

Para resolver esse problema, também tentei o seguinte

watch: {
    'isToggleBtnLabelDigitizePolygon.value'(newVal, oldVal) {
        console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.newVal:', newVal)
        console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.oldVal:', oldVal)

        if (newVal == true && oldVal == false) {
            console.log(debugTag, 'removeDigitized()');
        } else if (newVal == false && oldVal == true) {
            console.log(debugTag, 'digitize()');
        }
    },
},

mas também não funcionou

Por que o observador não dispara e como consertar?

aplicativo.vue :

<template>
    <button id="idBtnDigitizePolygon" class="clsBtnDigitizePolygon" @click="onDigitizePolygon()" :disabled="isBtnDigitizePolygonDisabled">
        {{ compPropsIsToggleBtnDigitizePolygon }}
    </button>
</template>

<script>
import { ref } from 'vue';

let isToggleBtnLabelDigitizePolygon = ref(true);

let debugTag = 'D.ButtonDigitizePolygon.vue::';
let infoTag = 'I.ButtonDigitizePolygon.vue::';

export default {
    data() {
        return {
            btnDigitizePolyhonState: this.isBtnDigitizePolygonDisabled,
        };
    },
    props: {
        isBtnDigitizePolygonDisabled: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        isToggleBtnLabelDigitizePolygon(newVal, oldVal) {
            console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.newVal:', newVal)
            console.info(infoTag, 'isToggleBtnLabelDigitizePolygon.oldVal:', oldVal)

            if (newVal == true && oldVal == false) {
                console.log(debugTag, 'removeDigitized()');
            } else if (newVal == false && oldVal == true) {
                console.log(debugTag, 'digitize()');
            }
        },
    },
    computed: {
        compPropsIsToggleBtnDigitizePolygon() {
            if (isToggleBtnLabelDigitizePolygon.value == true) {
                return 'digitize'
            } else {
                return 'clear'
            }
        },
    },
    methods: {
        onDigitizePolygon() {
            isToggleBtnLabelDigitizePolygon.value = !isToggleBtnLabelDigitizePolygon.value;
        },
    },
};
</script>