title: How to observe property changes with dom-bind
body: <p>How to observe property changes if I use <code>dom-bind</code>? The change in property is updated inside curly brackets, so I assume that there is some event related to change, but I don't know it's name.</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=""&gt;
  &lt;head &gt;
    &lt;link rel="import" href="bower_components/polymer/polymer.html"&gt;
    &lt;script src="bower_components/webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
    &lt;style&gt;
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;template is="dom-bind" id="app2"&gt;
    &lt;p&gt;test: &lt;span&gt;{{test}}&lt;/span&gt;&lt;/p&gt;
    &lt;input type="button" value="Change" on-click="chTest"&gt;
  &lt;/template&gt;
  &lt;script&gt;
    (function (document) {
      'use strict';
      var app = document.querySelector('#app2');
      app.test = "original value";
  
      app.addEventListener('test-changed', function () {
        console.log('change listener fired');
      });
      app.addEventListener('dom-change', function () {
        console.log("dom-change");
      });
      app.chTest = function () {
        console.log('click');
        app.test = "new value";
  // notifyPath-setter will fire "test-changed"-event
  //      app.notifyPath("test", "notify value");
      };
    })(document);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EDIT:
  There is a need to clarify my question: I want to invoke some function, when app.test changes.</p>