Observe model properties using Vue 3 and Typescript

Question

I'm trying to monitor my Typescript model properties and it works but gives a warning in the console and I can't find how to remove it.

This is my Typescript model:

import { watch, ref, Ref, reactive } from 'vue'

export default class Resa {
  public id: Number = 0
  public deferred_invoicing: Ref<Boolean> = ref(false)

  constructor(properties?: Object) {
    watch(this.deferred_invoicing, (newValue, oldValue) => {
      console.log(newValue)
    }
  }
}

The watch is working fine, but I have this warning in the console[Vue warn]: Invalid watch source: false A watch source can only be a getter/effect function, a ref, a reactive object , or an array of these types.

Did I do something wrong?

I have tried using the string 'deferred_invoicing' instead of this.deferred_invoicing

Answer 1

Your class instance is set to Reactive somewhere, making its deferred_invoicing attribute unreferenceable

use

watch(toRaw(this).deferred_invoicing, (newValue, oldValue) => {
      console.log(newValue)
    }