Пользовательские средства доступа к свойствам в LitElement

Чтобы научиться писать собственные средства доступа к свойствам, я пытаюсь создать средства доступа к свойствам с таким же поведением, что и средства доступа по умолчанию. Я использую пример из этих документов здесь, но я пытается заставить его работать. Следующее вызывает ошибку Uncaught RangeError: Maximum call stack size exceeded. Если я удалю геттер и сеттер, элемент будет работать, как ожидалось, и будут отрисованы два div, содержащие hello и world. Как я могу создать настраиваемые средства доступа к свойству для свойства data с таким же поведением, что и средства доступа к свойствам по умолчанию (где не определены средства получения и установки)?

import { LitElement, html } from "lit-element";
import { render } from "lit-html";

class TestElement extends LitElement {
  static get properties() {
    return {
      data: { type: Array },
    };
  }

  set data(val) {
    let oldVal = this.data;
    this.data = val;
    this.requestUpdate("data", oldVal);
  }

  get data() {
    return this.data;
  }

  constructor() {
    super();
    this.data = [];
  }

  render() {
    return html`${this.data.map(d => html` <div>${d}</div>`)}`;
  }
}
customElements.define("test-element", TestElement);

render(html`<test-element .data=${["hello", "world"]}></test-element>`, window.document.body);

Я пытаюсь воссоздать поведение этого примера, который отображает hello и world, как ожидалось:

import { LitElement, html } from "lit-element";
import { render } from "lit-html";

class TestElement extends LitElement {
  static get properties() {
    return {
      data: { type: Array },
    };
  }

  constructor() {
    super();
    this.data = [];
  }

  render() {
    return html`${this.data.map(d => html` <div>${d}</div>`)}`;
  }
}
customElements.define("test-element", TestElement);

render(html`<test-element .data=${["hello", "world"]}></test-element>`, window.document.body);