How to use the ember-classy-page-object/extend.findElement function in ember-classy-page-object

async reorderBy(deltaPosition) {
    let header = findElement(this);
    let targetElement = header;

    while (deltaPosition !== 0) {
      if (deltaPosition < 0) {
        deltaPosition++;
        targetElement = targetElement.previousElementSibling
          ? targetElement.previousElementSibling
          : targetElement;
      } else {
        deltaPosition--;
        targetElement = targetElement.nextElementSibling
          ? targetElement.nextElementSibling
          : targetElement;
      }
    }

get rowCount() {
    return Number(findElement(this).getAttribute('data-test-row-count'));
  },

async clickWith(options) {
      await click(findElement(this), options);
    },

get containerWidth() {
    return findElement(this).offsetWidth;
  },

get height() {
    return findElement(this).offsetHeight;
  },

get isLeaf() {
    return findElement(this).dataset.testLeafHeader;
  },

get width() {
    return findElement(this).offsetWidth;
  },

get width() {
    return findElement(this, 'table').offsetWidth;
  },

async clickWith(options) {
    await click(findElement(this), options);
  },

async resize(targetSize) {
    let resizeHandle = findElement(this, '.et-header-resize-area');

    if (!resizeHandle) {
      return;
    }

    let box = resizeHandle.getBoundingClientRect();
    let startX = (box.right + box.left) / 2;
    let deltaX = (targetSize - this.width) / getScale(resizeHandle);

    if (this.isFixedRight) {
      deltaX = -deltaX;
    }

    await mouseDown(resizeHandle, startX, resizeHandle.clientHeight / 2);
    await mouseMove(resizeHandle, startX + 20, resizeHandle.clientHeight / 2);
    await mouseMove(resizeHandle, startX + deltaX, resizeHandle.clientHeight / 2);