How to use the nuxt-property-decorator.Watch function in nuxt-property-decorator

@Component({
    name: 'b-input-date-time-',
})
export default class extends mixins(
    InputProps,
    StateProps,
) {
    date = '';
    time = '';

    @Watch('date')
    onDateChange() {
        this.emitDateTime();
    }

    @Watch('time')
    onTimeChange() {
        this.emitDateTime();
    }

    emitDateTime() {
        const dateTime = moment(
            `${this.date} ${this.time}`,
            'YYYY-MM-DD HH:mm',
        ).format();

        this.$emit('input', dateTime);
    }

    async mounted() {
        await Vue.nextTick();
        this.time = moment(this.value).format('HH:mm');

this.indeterminate = false;
            this.allSelected = true;
        } else {
            this.indeterminate = true;
            this.allSelected = false;
        }

        const arrayFiltered = this.value.filter(
            e => this.optionsList.indexOf(e) === -1,
        );
        const newValue = arrayFiltered.concat(array);

        if (!isEquals(this.value, newValue)) this.$emit('input', newValue);
    }

    @Watch('value')
    onValueChange() {
        this.updateSelectedFromValue();
    }

    mounted() {
        this.updateSelectedFromValue();
    }

    get optionsList(): string[] {
        return this.options.map(o => o.value);
    }

    updateSelectedFromValue() {
        const arr = this.value.filter(e => this.optionsList.indexOf(e) !== -1);

        if (!isEquals(this.selected, arr)) this.selected = arr;

id = -1;
    rest = 0;
    receiptShow = false;

    onOpen() {
        this.variables = { id: this.data.id.toString() };
    }

    async onResult({ data: { bill } }: ApolloQueryResult) {
        this.bill = bill;
        this.id = bill.id;
        this.rest = bill.totalPrice - bill.totalReceipts - bill.discount;
        this.setReceipts();
    }

    @Watch('receiptShow')
    setReceipts() {
        this.receipts = this.receiptShow
            ? this.bill.receipts
            : this.bill.receipts.filter(
                  r =>
                      r.status === ReceiptStatusEnum.Pending ||
                      r.status === ReceiptStatusEnum.Success,
              );
    }
}

@servicesModule.Getter('modules') modules
  @servicesModule.Getter('newInstanceId') newInstanceId
  @servicesModule.Action(actions.LOAD_MODULES) loadModules
  @servicesModule.Action(actions.CREATE_INSTANCE_DRAFT) createDraftAction
  dialog = false

  async openDialog() {
    this.dialog = true
    this.loadModules()
  }

  async createDraft(moduleName: string) {
    this.createDraftAction({ moduleName })
  }

  @Watch('newInstanceId')
  onNewInstanceId(val: number, oldVal: number) {
    this.dialog = false
    this.$router.push(`/instances/${val}/configuration`)
  }
}

@Prop({ default: true, type: Boolean })
    closeOnScroll!: boolean;

    top = 0;
    left = 0;
    show = false;
    data: any = null;

    get style() {
        return this.show
            ? { top: `${this.top}px`, left: `${this.left}px` }
            : null;
    }

    @Watch('closeOnScroll')
    closeOnScrollChanged(value, oldValue) {
        if (value === oldValue) {
            return;
        }

        if (value) {
            this.addScrollEventListener();
        } else {
            this.removeScrollEventListener();
        }
    }

    close(emit: boolean | Event = true) {
        if (!this.show) {
            return;
        }

async created() {
    this.loadInstances()
  }

  @Watch('searchItem')
  search(val: string) {
    if (
      this.selectedItem &&
      val &&
      (this.threadModel === null || val.toLowerCase() !== this.threadModel!!.title.toLowerCase())
    ) {
      this.searchItems({ id: this.selectedItem.id, query: val })
    }
  }

  @Watch('selectedItem')
  watchSelected(val: string) {
    this.clearResults()
  }

  get labeledInstances() {
    if (!this.instances) {
      return null
    }
    return this.instances.map(el => {
      return {
        text: `${el.serviceModule.displayName} (${el.instanceName})`,
        value: el,
      }
    })
  }

connectionName: string = ''

  async openDialog() {
    this.dialog = true
  }

  async closeDialog() {
    this.dialog = false
    this.connectionName = ''
  }

  async createNewConnection() {
    this.createConnection({ connectionName: this.connectionName })
  }

  @Watch('newConnectionId')
  onNewConnectionId(val: number, oldVal: number) {
    this.closeDialog()
    this.$router.push(`/connections/${val}/threads`)
  }
}

@servicesModule.Getter('instances') instances
  @servicesModule.Action(serviceAction.LOAD_INSTANCES) loadInstances
  @servicesModule.Action(serviceAction.SEARCH_THREADS) searchItems
  @servicesModule.Action(serviceAction.CLEAR_RESULTS) clearResults
  @connectionsModule.Action(actions.CREATE_NEW_THREAD) createThread
  dialog = false
  threadModel: { avatarUrl: string, id: string, title: string, subtitle: string } | null = null
  threadId: string = ''
  selectedItem: ThreadConnection | null = null

  async created() {
    this.loadInstances()
  }

  @Watch('searchItem')
  search(val: string) {
    if (
      this.selectedItem &&
      val &&
      (this.threadModel === null || val.toLowerCase() !== this.threadModel!!.title.toLowerCase())
    ) {
      this.searchItems({ id: this.selectedItem.id, query: val })
    }
  }

  @Watch('selectedItem')
  watchSelected(val: string) {
    this.clearResults()
  }

  get labeledInstances() {

return { title: 'Quản lý hóa đơn' };
    }

    billStatus: BillStatusEnum[] = [BillStatusEnum.Pending];

    bills: GetBills.Bills[] = [];
    billsFiltered: (GetBills.Bills & {
        rest: number;
    })[] = [];

    async onResult({ data: { bills } }: ApolloQueryResult) {
        this.bills = bills;
        this.setBillsFiltered();
    }

    @Watch('billStatus')
    setBillsFiltered() {
        this.billsFiltered = this.bills
            .filter(bill => this.billStatus.includes(bill.status))
            .map(bill => ({
                ...bill,
                rest:
                    bill.status === BillStatusEnum.Cancel
                        ? 0
                        : bill.totalPrice - bill.totalReceipts - bill.discount,
            }));
    }

    billToMoney(value: number, key: string, item: GetBills.Bills) {
        if (item.status === BillStatusEnum.Cancel && value === 0) return '-';
        return toMoney(value);
    }