title: Polymer: detecting an object property change from the parent component
body: <p>I have a component that loads an object from Firebase using firebase-document. Then that object is passed to a child component. When I change the object in the child component, the change is not detected in the parent, so the object is not updated in Firebase.</p>
  
  <p>Here is the main component:</p>
  
  <pre><code>&lt;dom-module id="some-component"&gt;
  
    &lt;template&gt;
  
      &lt;firebase-document path="/projects/[[project_id]]" data="{{project}}"&gt;&lt;/firebase-document&gt;
  
      &lt;some-child project="{{project}}"&gt;&lt;/some-child&gt;
  
    &lt;/template&gt;
  
    &lt;script&gt;
      Polymer({
        is: 'some-component',
        properties: {
          project: {type: Object, notify: true, observer: "projectChanged"}
        },
        projectChanged: function() {
          console.log("we've detected some changes!");
        }
      });
    &lt;/script&gt;
  
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>And here is the child component:</p>
  
  <pre><code>&lt;dom-module id="some-child"&gt;
  
    &lt;template&gt;
  
      &lt;a on-tap="changeProject"&gt;Let's change some property on our project!&lt;/a&gt;
  
    &lt;/template&gt;
  
    &lt;script&gt;
      Polymer({
        is: 'some-child',
        properties: {
          project: {type: Object, notify: true}
        },
        changeProject: function() {
          this.project.name = "A new name"; // this never propagates back to the parent component
        }
      });
    &lt;/script&gt;
  
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>The expected behavior is that when I click on the link, the object's property would change, it would be detected by the parent, and there would be a console.log. However it doesn't seem to happen.</p>
  
  <p><strong>Update with the solution</strong></p>
  
  <p>Using this.set() in the child component does the trick:</p>
  
  <pre><code>this.set("project.name", "A new name")
  </code></pre>