Как обрабатывать привязку данных элементов с сеткой vaadin при использовании dataProvider

Я использую следующий пример из документов vaadin с полимером3

<vaadin-grid id="grid" aria-label="Remote Data Example">
  <vaadin-grid-column path="firstName"></vaadin-grid-column>
  <vaadin-grid-column path="lastName"></vaadin-grid-column>
  <vaadin-grid-column path="email"></vaadin-grid-column>
</vaadin-grid>
<script>
  window.addEventListener('WebComponentsReady', function() {
    const grid = document.querySelector('vaadin-grid');

    grid.size = 200;
    grid.dataProvider = function(params, callback) {
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        callback(JSON.parse(xhr.responseText).result);
      };
      var index = params.page * params.pageSize;
      xhr.open('GET', 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize, true);
      xhr.send();
    };
  });
</script>

Я не мог понять, как обновить строку из загруженных элементов с помощью полимерной привязки данных

Я пытался получить доступ к свойству items в сетке, используя this.$.grid.items, но это всегда возвращает количество элементов.

Я хочу иметь возможность сделать что-то вроде this.$.grid.items[0].firstName = 'changed' и отразить изменение в сетке.

Любая помощь приветствуется