javascript - vaadin レンダラーがレンダリング関数を期待どおりに返すようにするにはどうすればよいですか?

Question

私は lit-element と vaadin グリッドを使用しており、適切な vaadin 列にデータを返すためにレンダラー関数を使用しようとしています。ただし、render() メソッドを返そうとすると、データが [オブジェクト オブジェクト] として vaadin グリッド列にレンダリングされます。

firstUpdated() {
    super.firstUpdated();

    fetch('https://demo.vaadin.com/demo-data/1.0/people?count=200')
      .then(r => r.json())
      .then(data => {
        this.users = data.result;
      });
  }

  render() {
    return html`
      <style>
        .address {
          white-space: normal;
        }

        vaadin-grid-filter {
          display: flex;
        }

        vaadin-text-field {
          max-width: 100%;
        }
      </style>

      <vaadin-grid .items="${this.users}" .rowDetailsRenderer="${this.rowDetailsRenderer}" column-reordering-allowed multi-sort>
        <vaadin-grid-column width="50px" flex-grow="0" header="#" .renderer="${this.indexRenderer}" resizable></vaadin-grid-column>
        <vaadin-grid-filter-column path="firstName" header="First name"></vaadin-grid-filter-column>
        <vaadin-grid-sort-column path="lastName" header="Last name"></vaadin-grid-sort-column>
        <vaadin-grid-column width="150px" header="Repitch" .renderer="${this.buttonRenderer}"></vaadin-grid-column>
        <vaadin-grid-column width="150px" path="email" .headerRenderer="${this.emailHeaderRenderer}"></vaadin-grid-column>

      </vaadin-grid>
    `;
  }

  buttonRenderer(root, column, rowData) {
    render(
      html`
        <button>Test</button>
      `, 
      root
    );
  }

  indexRenderer(root, column, rowData) {
    render(
      html`
        <div>${rowData.index}</div>
      `, 
      root
    );
  }

${rowData.index} を最初の vaadin グリッド列にレンダリングすることを期待していますが、UI に表示される値は [object object. レンダラー関数 (名と姓) を使用していない列にデータを表示できるので、フェッチから受け取ったデータを表示できます。どんな助けでも大歓迎です！