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

onAddingNewItemHandler(editedItem?: IWordProtectionBlackListItem, index: number = -1) {
    if (editedItem) {
      this.newListItem = editedItem;
    }
    this.editIndex = index;
    this.$modal.show(NEW_WORD_PROTECTION_LIST_MODAL_ID);
  }

  onDeleteAliasHandler(index: number) {
    const newListItemArray = this.value.slice(0);
    newListItemArray.splice(index, 1);
    this.$emit('input', newListItemArray);
  }

  @Watch('errors.items.length')
  @debounce(200)
  async onErrorsChanged() {
    await this.$refs.form.validateAndGetErrorsCount();
  }

  async onAddNewItemHandler() {
    if (await this.$refs.form.validateAndGetErrorsCount()) return;

    const newListItemArray = this.value.slice(0);

    if (this.editIndex > -1) {
      // editing existing item
      newListItemArray.splice(this.editIndex, 1, this.newListItem);
    } else {
      newListItemArray.push(this.newListItem);
    }

get projectOptions() {
      const projects = this.submitter != null && this.submitter.projects || []
      const options = projects.map(({ project: { id, name } }) => ({
        value: id,
        label: name,
      }))
      this.unknownProjects.forEach(project => {
        if (!projects.some(p2 => project.id === p2.project.id)) {
          options.push({ value: project.id, label: project.name })
        }
      })
      options.push({ value: CREATE_PROJECT, label: 'Create a new project...' })
      return options
    }

    @Watch('submitter')
    fetchUnknowns() {
      this.fetchGroupIfUnknown()
      this.fetchProjectsIfUnknown()
    }

    @Watch('value.groupId')
    async fetchGroupIfUnknown() {
      // If the dataset is saved with a groupId for a group that the user isn't a member of, or the group
      // was selected through the find dialog, the drop-down list won't have an entry for it, so do an extra query for it.
      const groupId = this.value.groupId
      if (this.groupIdIsUnknown && (!this.unknownGroup || this.unknownGroup.id !== groupId)) {
        const { data } = await this.$apollo.query({
          query: oneGroupQuery,
          variables: { groupId },
        })
        // Double-check the value hasn't changed before setting unknownGroup

plotObj = '';
        useRampUp = false;
        rampUpType = 'PROCESS';

        created() {
            Object.assign(this.test, this.testProp);
            this.useRampUp = this.test.useRampUp;
            this.rampUpType = this.test.rampUpType;
        }

        mounted() {
            this.$watchAll(['test.rampUpStep', 'test.rampUpInitCount', 'test.rampUpInitSleepTime', 'test.rampUpIncrementInterval'], this.updateRampUpChart);
        }

        @Watch('useRampUp')
        watchUseRampUp(val) {
            this.$refs.rampUpConfig.forEach(component => component.readonly = !val);
            this.updateRampUpChart();
        }

        getParams() {
            return {
                useRampUp: this.useRampUp,
                rampUpType: this.rampUpType,
                rampUpInitCount: this.test.rampUpInitCount,
                rampUpStep: this.test.rampUpStep,
                rampUpInitSleepTime: this.test.rampUpInitSleepTime,
                rampUpIncrementInterval: this.test.rampUpIncrementInterval,
            };
        }

}

    mounted() {
      this.setStatus(this.value);
      this.bindKeyUp();
    }

    beforeDestroy() {
      this.unBindKeyUp();
    }

    setScroll(val: boolean) {
      document.body.style.overflow = val ? 'hidden' : '';
    }

    @Watch('value')
    @Emit('model')
    setStatus(val: boolean) {
      this.status = val;
      this.setScroll(val);
      return this.status;
    }

    @Emit('change')
    changeStatus(type: string) {
      this.setStatus(false);
      (this as any)[type](this.status);
      this.change(this.status);
      return this.status;
    }

    @Emit('cancel')

async mounted() {
    await this.checkPackBalance()
    this.packs = await this.packBalance
  }

  modal(ref: string) {
    return this.$refs[ref] as BModal
  }

  async transferpackTo(item) {
    this.setPackToTransferSelected(item)
    this.$root.$emit("bv::show::modal", "transfer-packs-modal")
  }

  @Watch("packBalance")
  async onUserPackChanged(
    newUserPacks: PackDetail[],
    oldUserPacks: PackDetail[],
  ) {
    this.packs = newUserPacks
  }

}

<style lang="scss"></style>

@Provide(Store.KEY)
  public store = new Store({
    selectedId: this.selectedId,
    expandedIds: [],
    items: {},
  });

  @Provide(Config.KEY)
  public config = new Config(this.mode);

  public render() {
    return <nav class="fd-side-nav">{this.$slots.default}</nav>;
  }

  @Watch('localSelectedId', { immediate: true })
  public localSelectedIdChanged(newId: string | null) {
    this.store.selectedId = newId;
    this.$emit('update:selectedId', this.store.selectedId);
  }

  get localSelectedId() { return this.store.selectedId; }

  @Watch('selectedId', { immediate: true })
  public updateSelectedId(newId: string | null) {
    this.store.selectedId = newId;
  }
}

private actionTypeLabel: string = "";
        private agentService: AgentService;
        private showLogs = false;

        private showTCPConnect = false;
        private showTCPEnable = false;
        private showEnroll = false;
        private showCancelBooking = false;
        private actionSub: Subscription;

        constructor(props) {
            super(props);
            this.agentService = Services.getInstance().node.agentService;
        }

        @Watch('data', {immediate: true})
        updateView() {
            this.device = {
                name: this.data.firebaseDevice ? this.data.firebaseDevice.name : this.data.adbDevice.model,
                deviceId: this.data.getDataSerialID(),
                type: this.data.adbDevice ? this.data.adbDevice.id : this.data.firebaseDevice.ip,
                enrolled: (this.data.firebaseDevice != null),
            };

            this.deviceStatus = "Not enrolled";

            if (this.data.firebaseDevice) {
                switch (this.data.firebaseDevice.status) {
                    case DeviceStatus.offline:
                        this.deviceStatus = "Offline";
                        break;
                    case DeviceStatus.available:

mounted() {
		this.recalculateDimensions();
		this.resize$ = Screen.resizeChanges.subscribe(() =>
			this.recalculateDimensions()
		);
	}

	destroyed() {
		if (this.resize$) {
			this.resize$.unsubscribe();
			this.resize$ = undefined;
		}
	}

	@Watch('videoId', { immediate: true })
	videoIdChange() {
		if (!this.videoId) {
			return;
		}

		let url: string;

		if (this.videoProvider === 'youtube') {
			url = 'https://www.youtube.com/embed/' + this.videoId;
		} else if (this.videoProvider === 'vimeo') {
			url = 'https://player.vimeo.com/video/' + this.videoId;
		} else {
			throw new Error('Invalid video provider.');
		}

		if (this.autoplay) {

}
  private qosOption: qosList = [0, 1, 2]
  private subsList: SubscriptionModel[] = []

  get rules() {
    return {
      topic: { required: true, message: this.$t('common.inputRequired') },
      qos: { required: true, message: this.$t('common.selectRequired') },
    }
  }

  get vueForm(): VueForm {
    return this.$refs.form as VueForm
  }

  @Watch('record')
  private handleRecordChanged(val: ConnectionModel) {
    this.getCurrentConnection(val.id as string)
  }

  private getBorderColor(): string {
    let $index: number = this.subsList.length
    const lastSubs: SubscriptionModel = this.subsList[$index - 1]
    const colors = ['#CEEC97', '#F4B393', '#F78764', '#FC60A8', '#668D97']

    if ($index === 0) {
      return colors[0]
    }
    const subIndex = colors.findIndex((color) => color === lastSubs.color)
    if (colors[subIndex + 1]) {
      $index = subIndex + 1
    } else {

public saveSettings () {
    const savingLocaleChangers = {}
    for (const localeChanger of this.tempLocaleChangers) {
      savingLocaleChangers[localeChanger.id] = localeChanger
      delete savingLocaleChangers[localeChanger.id].id
    }

    const savingConfig = {
      ...this.defaultConfig,
      localeChangers: savingLocaleChangers
    }
    ipcRenderer.send(IpcTypes.REQUEST_SAVE_CONFIG, 'default', savingConfig)
    this.$dialog.notify.success(this.$i18n.t('saved').toString())
  }

  @Watch('defaultConfig', {
    immediate: true,
    deep: true
  })
  public resetSettings () {
    this.tempLocaleChangers = []
    for (const key in this.defaultConfig.localeChangers) {
      if (this.defaultConfig.localeChangers.hasOwnProperty(key)) {
        this.tempLocaleChangers.push({
          ...this.defaultConfig.localeChangers[key],
          id: key
        })
      }
    }
  }

  @Watch('editedItem.exec')