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

/*
   * @input {boolean} If true, the radios can be deselected. Default false.
   */
  @Prop() allowEmptySelection: boolean = false;

  /*
   * @input {boolean} If true, the user cannot interact with the radio group. Default false.
   */
  @Prop({ mutable: true }) disabled: boolean = false;

  /**
   * @input {string} the value of the radio group.
   */
  @Prop({ mutable: true }) value: string;

  @PropDidChange('value')
  protected valueChanged() {
    this.update();
    this.ionChange.emit(this);
  }

  @Listen('ionRadioDidLoad')
  protected radioDidLoad(ev: RadioEvent) {
    const radio = ev.detail.radio;
    this.radios.push(radio);
    radio.radioId = 'rb-' + this.radioGroupId + '-' + (++this.ids);

    // if the value is not defined then use its unique id
    radio.value = !radio.value ? radio.radioId : radio.value;

    if (radio.checked && !this.value) {
      this.value = radio.value;

@Component({
    tag: 'stc-tags',
    styleUrl: 'tags.scss'
})
export class StcTags {

    @State() state: TagState[] = [];

    @Prop() tags: Tag[] = [];

    @Prop() placeholder: string = 'Add a tag';

    @Event({ eventName: 'stc-tags-close' })
    close: EventEmitter;
    
    @PropDidChange('tags')
    tagsWillChange(newValue: Tag[]) {
        this.createState(newValue);
    }

    @Listen('stc-chip-close')
    onTagClose(event: CustomEvent) {
        const detail: StcChipCloseEvent = event.detail;
        
        const tagToRemove = this.state.find(item => item.id === detail.id);
        
        this.state = this.state.filter(item => item.id !== detail.id);

        this.close.emit(tagToRemove);
    }

    componentDidLoad() {

* @input {boolean} If true, the tab button is visible within the
   * tabbar. Default: `true`.
   */
  @Prop() show = true;

  /**
   * @input {boolean} If true, hide the tabs on child pages.
   */
  @Prop() tabsHideOnSubPages = false;

  constructor() {
    this.nav = new Promise((resolve) => this.resolveNav = resolve);
  }

  @Prop({ mutable: true }) selected = false;
  @PropDidChange('selected')
  selectedChanged(selected: boolean) {
    if (selected) {
      this.ionSelect.emit(this.el);
    }
  }

  /**
   * @output {Tab} Emitted when the current tab is selected.
   */
  @Event() ionSelect: EventEmitter;

  protected componentDidUpdate() {
    if (this.init && this.resolveNav) {
      const nav = this.el.querySelector('ion-nav') as any as StencilElement;
      if (nav) {
        nav.componentOnReady(this.resolveNav);

private containerTop: number;
  private containerBottom: number;

  @State() _enabled: boolean = false;
  @State() _iconVisible: boolean = false;
  @State() _actived: boolean = false;

  @Element() private el: HTMLElement;

  @Prop() enabled: boolean = false;

  /**
   * @input {string} Which side of the view the ion-reorder should be placed. Default `"end"`.
   */
  @PropDidChange('enabled')
  protected enabledChanged(enabled: boolean) {
    if (enabled) {
      this._enabled = true;
      Context.dom.raf(() => {
        this._iconVisible = true;
      });
    } else {
      this._iconVisible = false;
      setTimeout(() => this._enabled = false, 400);
    }
  }

  componentDidLoad() {
    this.containerEl = this.el.querySelector('ion-gesture') as HTMLElement;
    this.scrollEl = this.el.closest('ion-scroll') as HTMLElement;
  }

@Component({
  tag: 'ion-tab-highlight'
})
export class TabHighlight {

  @Element() private el: HTMLElement;

  @State() animated = false;
  @State() transform = '';

  @Prop({ context: 'dom' }) dom: DomController;

  @Prop() selectedTab: HTMLIonTabElement;
  @PropDidChange('selectedTab')
  selectedTabChanged() {
    this.updateTransform();
  }

  @Listen('window:resize')
  onResize() {
    this.updateTransform();
  }

  componentDidLoad() {
    this.updateTransform();
  }

  protected updateTransform() {
    this.dom.read(() => {
      const btn = this.getSelectedButton();