Vaadin Grid dynamic columns

HTML

<base href="https://polygit.org/vaadin-grid+vaadin+^4.0.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer-element.html">
  <link rel="import" href="vaadin-grid/vaadin-grid.html">

  <dom-module id="x-grid">
    <template>
      <style>
        :host {
          display: block;
        }
      </style>

      <vaadin-grid items="[[rows]]">

        <vaadin-grid-column width="50px" flex-grow="0">
          <template class="header">#</template>
          <template>[[index]]</template>
        </vaadin-grid-column>
        
        <template is="dom-repeat" items="[[columns]]" as="col">
          <vaadin-grid-column>
            <template class="header">[[col.title]]</template>
            <!-- https://www.polymer-project.org/2.0/docs/api/mixins/Polymer.ElementMixin#method-get-->
            <template>[[get(col, item)]]</template>
          </vaadin-grid-column>
        </template>

      </vaadin-grid>


    </template>
    <script>
      window.addEventListener('WebComponentsReady', () => {
        class XGrid extends Polymer.Element {

          static get is() {
            return 'x-grid';
          }
          
          static get properties() {
            return {
              rows: {
                type: Array,
                value: function () {
                  return [
                    { firstName: 'Blez',  lastName: 'Pascal'},
                    { firstName: 'Ada',  lastName: 'Lovelace'}
                  ]
                }
              },
              columns: {
                type: Array,
                value: function () {
                  return [
                    { title: 'First Name',  value: 'firstName'},
                    { title: 'Last Name',  value: 'lastName'}
                  ]
                }  
              }
            }
          }
        
        }
        customElements.define('x-grid', XGrid);
         
      });
    </script>
 ...