data binding dom-bind to child

<!doctype html>
<html lang="">
<head >
<meta name="description" content="property change listener on dom-bind">
  <link rel="import" href="http://polygit.org/components/polymer/polymer.html">
  <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="http://polygit.org/components/paper-button/paper-button.html">
  <link rel="import" href="http://polygit.org/components/iron-ajax/iron-ajax.html">
  <link rel="import" href="test-element.html">
  <style>
    paper-button {
      background-color: green;
    }
  </style>
</head>

<body unresolved>
    <template id="t" is="dom-bind">           
        <paper-button on-tap="getData">Get Data</paper-button>
        <iron-ajax 
        id="dataAjax" 
        url="data.json"
        last-response={{data}}></iron-ajax>
        <p>Data from ajax: <span>{{data.id}}</span> <span>{{data.val}}</span> </p>

    </template>  
  <script src="script.js"></script>
</body>
</html>

// Code goes here
  (function (document) {
    'use strict';
    document.addEventListener('WebComponentsReady', function() {

        // We have to bind the template with the model
        var t = document.querySelector('#t');

        // chaging the property directly does not reflect in the GUI... :-(
        t.getData = function() {
          t.$.dataAjax.generateRequest();
        }
    });
  })(document);

/* Styles go here */

{
  "id": 1,
  "val": "one"
}