polymer starter app fragment with vaadin grid 2.0 dev ... trying to bind to Firebase query data

gistfile1.txt

<!--
This is a fragment from a Polymer Starter app,  I am trying to integrate Vaadin-grid with row-details from a Firebase Query.
The FB query is working, and displays the correct number of rows
But I do not understand how to bind the Firebase datasource to the Vaadin-grid.
Perhaps someone could give me a clue?
-->

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view4">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>


 <!--I guess you can just bind 
 firebase-collection data=“{{items}}” to vaadin-grid items=[[items]]-->


    <firebase-query
        id="query"
        app-name="SHOE33"
        path="/BIN"
        data="{{items}}">
    </firebase-query>

    <div class="card">
      <div class="circle">3</div>
      <!--this works-->
            <h1>View Three</h1>
            <p>List of BINS</p>
            <p>All bins status</p>
            <p>Total Bins =  [[items.length]] </p>
      </div>

<!--So now I have to:   try to get firebase data into "items" property of your my-view4
and bind it to vaadin-grid items=[[items]]
and I am not sure how to do that.-->

<template is="dom-bind">
  <style is="custom-style">
    #grid-row-details .details {
      padding: 10px;
      margin: 10px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
      font-size: 20px;
    }

    #grid-row-details img {
      width: 80px;
      height: 80px;
    }

    #grid-row-details {
      --primary-color: #00b4f0;
      --paper-font-common-base: {
        font-family: var(--font-family);
        font-size: 14px;
      };
    }
  </style>
  <x-data-source data-source="{{items}}"></x-data-source>

  <vaadin-grid id="grid-row-details" data-source="[[item]]" size="200">

    <template class="row-details">
      <div class="details">
        <!--<img src="[[item.user.picture.large]]">-->
        <p>Hi! My name is [[item.$key]]!</p>
      </div>
    </template>

    <vaadin-grid-column width="50px">
      <template class="header">#</template>
      <template>[[index]]</template>
    </vaadin-grid-column>

    <vaadin-grid-column>
      <template class="header">BINTS01</template>
      <template>[[item.BINTS01]]</template>
    </vaadin-grid-column>

    <vaadin-grid-column>
      <template class="header">BinScanWeekNumber</template>
      <template>[[item.BinScanWeekNumber]]</template>
    </vaadin-grid-column>
    <vaadin-grid-column width="100px">
      <template class="header"></template>
      <template>
        <paper-checkbox checked="{{expanded}}">Show Details</paper-checkbox>
      </template>
    </vaadin-grid-column>
  </vaadin-grid>
</template>

  </template>