How to track the state of two computed properties using logical AND in vue watch?

Question

Vue.js

That is, there is a property A and B, it is necessary for watch to work when both A and B change. If there is no such built-in capability, then how could it be bypassed?

Answer 1

In the end, how did. Added 2 state variables and merged 2 properties into one compoundAB:

data () {
    return {
      stateAChanged: false,
      stateBChanged: false
    }
  },
  computed: {
    getA () {
     ....
    },
    getB () {
     ....
    },
    compoundAB() {
      return `${this.getA}|${JSON.stringify(this.getB)}`
    }
  }

Property B is implied as an object. Watch checks state variables and if true is executed

watch: {
    compoundAB: function (newVal, oldVal) {
      const [oldA , oldB ] = oldVal.split('|');
      const [newA, newB] = newVal.split('|');

      if (oldA !== newA) {
        this.stateAChanged = true
      }
      if (oldB !== newB) {
        this.stateBChanged = true
      }
      if (this.stateAChanged && this.stateBChanged) {
        this.stateAChanged = this.stateBChanged = false
      }
    }
  },

Answer 2

Inside watch, you are passed the new and old values ​​of your properties. Just check that both new values ​​are not equal to the old ones