How to use the @stencil/core.Watch function in @stencil/core

/**
   * An optional description for this item.  This will appear below the label text.
   */
  @Prop({ reflect: true }) textDescription?: string;

  @Watch("textDescription") textDescriptionWatchHandler() {
    this.calciteListItemPropsUpdated.emit();
  }

  /**
   * The main label for this item. This will appear next to the icon.
   */
  @Prop({ reflect: true }) textLabel: string;

  @Watch("textLabel") textLabelWatchHandler() {
    this.calciteListItemPropsUpdated.emit();
  }

  /**
   * A unique value used to identify this item - similar to the value attribute on an <input>.
   */
  @Prop({ reflect: true }) value!: string;

  // --------------------------------------------------------------------------
  //
  //  Private Properties
  //
  // --------------------------------------------------------------------------

  @Element() el: HTMLCalcitePickListItemElement;

const detail = { visible };
    this.ionChange.emit(detail);
    this.ionSplitPaneVisible.emit(detail);
  }

  componentDidLoad() {
    this._styleChildren();
    this.whenChanged();
  }

  componentDidUnload() {
    this.rmL && this.rmL();
    this.rmL = null;
  }

  @Watch('when')
  protected whenChanged() {
    this.rmL && this.rmL();
    this.rmL = null;

    // Check if the split-pane is disabled
    if (this.disabled) {
      this.visible = false;
      return;
    }

    // When query is a boolean
    const query = this.when;
    if (typeof query === 'boolean') {
      this.visible = query;
      return;
    }

* Emitted when the select loses focus.
   */
  @Event() ionBlur: EventEmitter;

  /**
   * Emitted when the styles change.
   */
  @Event() ionStyle: EventEmitter;


  @Watch('disabled')
  disabledChanged() {
    this.emitStyle();
  }

  @Watch('value')
  valueChanged() {
    // this select value just changed
    // double check the select option with this value is checked
    if (this.value === undefined) {
      // set to undefined
      // ensure all that are checked become unchecked
      this.childOpts.filter(o => o.selected).forEach(selectOption => {
        selectOption.selected = false;
      });
      this.text = '';

    } else {
      let hasChecked = false;
      const texts: string[] = [];

      this.childOpts.forEach(selectOption => {

@State() parentEl: any;

  @State() navWidth: any;

  @State() scrollPos = 0;

  @State() isIE: boolean;

  @Element() el: HTMLElement;

  @Watch('primaryItems')
  setPrimaryItems(items) {
    this.primaryItems = this.parse(items);
  }

  @Watch('secondaryItems')
  setSecondaryItems(items) {
    this.secondaryItems = this.parse(items);
  }

  @Watch('theme')
  setTheme(name = undefined) {
    this.theme = name || this.store.getState().theme.current;
    this.currentTheme = this.store.getState().theme.items[this.theme];
  }

  @Listen('window:scroll')
  handleScroll() {
    let isStick = false;
    // try catch is used to avoid error in IE with getBoundingClientRect
    if (this.sticky) {
      try {

export class NvqAutocomplete {  

    @Prop() name: string;
    @Prop() placeholder: string;
    @Prop() value: string;
    @Prop() itemsSource: string;
    @Prop() width: string;
    @Prop() remote:boolean = false;
    
    @Element() el: HTMLElement;

    items:string[] = [];
    endpoint:string = "";
    style:{ [key:string]:string } = {};

    @Watch('itemsSource')
    itemsSourceHandler(newValue:string) {
        if (this.remote) {
            this.endpoint = newValue;
        } else {
            this.items = newValue.split(",");
        }
    }

    isLocal() {
        return this.endpoint == "" || this.endpoint == null || this.endpoint == undefined;
    }

    async handleInput(e) {   
        let target = e.target;  
        if (this.items === [] || this.items.length == 0) {
            this.itemsSourceHandler(this.itemsSource);

/**
   * Emitted when the styles change.
   * @internal
   */
  @Event() ionStyle!: EventEmitter;

  @Watch('checked')
  checkedChanged(isChecked: boolean) {
    this.ionChange.emit({
      checked: isChecked,
      value: this.value
    });
  }

  @Watch('disabled')
  disabledChanged() {
    this.emitStyle();
    if (this.gesture) {
      this.gesture.enable(!this.disabled);
    }
  }

  async connectedCallback() {
    this.gesture = (await import('../../utils/gesture')).createGesture({
      el: this.el,
      gestureName: 'toggle',
      gesturePriority: 100,
      threshold: 5,
      passive: false,
      onStart: () => this.onStart(),
      onMove: ev => this.onMove(ev),

*
   * Provide a render function for the footer to be rendered. Returns a JSX virtual-dom.
   */
  @Prop() renderFooter?: (item: any, index: number) => any;

  /**
   * NOTE: only Vanilla JS API.
   */
  @Prop() nodeRender?: ItemRenderFn;

  /** @internal */
  @Prop() domRender?: DomRenderFn;

  @Watch('itemHeight')
  @Watch('headerHeight')
  @Watch('footerHeight')
  @Watch('items')
  itemsChanged() {
    this.calcCells();
    this.updateVirtualScroll();
  }

  async componentDidLoad() {
    const contentEl = this.el.closest('ion-content');
    if (!contentEl) {
      console.error('virtual-scroll must be used inside ion-content');
      return;
    }
    await contentEl.componentOnReady();

    this.contentEl = contentEl;
    this.scrollEl = await contentEl.getScrollElement();

@Component({
  tag: 'sti-item',
  styleUrl: 'item.pcss',
  shadow: true
})
export class Item {

  @Prop() item: ItemData = null;

  @Prop() print = false;

  @Prop() dark = false;

  @State() expanded = ExpandedValues.NONE;

  @Watch('item')
  protected itemChangeHandler(newValue: ItemData, oldValue: ItemData) {
    const oldLabel = oldValue ? oldValue.label : undefined;

    if (!newValue || newValue.label !== oldLabel) {
      this.expanded = ExpandedValues.NONE;
    }
  }

  protected hostData() {
    return {
      class: {
        dark: this.dark
      }
    };
  }

@Prop() color: string;

  /**
   * The mode determines which platform styles to use.
   * Possible values are: `"ios"` or `"md"`.
   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
   */
  @Prop() mode: 'ios' | 'md';

  /**
   * How long, in milliseconds, to wait to trigger the
   * `ionChange` event after each change in the range value. Default `0`.
   */
  @Prop() debounce = 0;

  @Watch('debounce')
  protected debounceChanged() {
    this.ionChange = debounceEvent(this.ionChange, this.debounce);
  }

  /*
   * If true, the user cannot interact with the range. Defaults to `false`.
   */
  @Prop() disabled = false;

  /**
   * Show two knobs. Defaults to `false`.
   */
  @Prop() dualKnobs = false;

  /**
   * Maximum integer value of the range. Defaults to `100`.

table: {},
    tbody: {},
    tr: {},
    td: {},
    thead: {},
    th: {},
    tfoot: {},
  };

  @Prop() tableTitle: string;

  @Prop() titleVariant = 'heading3';

  @Prop() tableData: any = [];

  @Watch('tableData')
  handleTableData() {
    this.load('tableData', 'tableDataArray');
  }

  @Prop() tableHeaders: any;

  @Watch('tableHeaders')
  handleTableHeaders() {
    this.load('tableHeaders', 'tableHeadersData');
  }

  @Prop() tableProps = {};

  @Prop() select: (row: any) => void;

  @Event() rowClick: EventEmitter;