title: Polymer - Updating Element
body: <p>I'm learning Polymer. One item that is challenging me is updating the item of an array. I wish there was a CDN for Polymer so I could put together a fiddle. For now though, I have an element defined like this:</p>
  
  <p><strong>my-element.html</strong></p>
  
  <pre><code>&lt;dom-module id="my-element"&gt;
    &lt;button on-click="onLoadData"&gt;Load Data&lt;/button&gt;  
    &lt;button on-click="onTest1Click"&gt;Test 1&lt;/button&gt;
    &lt;button on-click="onTest2Click"&gt;Test 2&lt;/button&gt;
  
    &lt;template is="dom-repeat" items="[[ data ]]" as="element"&gt;
      &lt;div&gt;&lt;span&gt;[[ element.id ]]&lt;/span&gt; - &lt;span&gt;[[ element.status ]]&lt;/span&gt;&lt;/div&gt;
      &lt;template is="dom-repeat" items="[[ element.children ]]" as="child"&gt;
        &lt;div&gt;&amp;nbsp;&amp;nbsp;&lt;span&gt;[[ child.id ]]&lt;/span&gt; - &lt;span&gt;[[ child.status ]]&lt;/span&gt;&lt;/div&gt;
      &lt;/template&gt;
    &lt;/template&gt;
  
    &lt;/template&gt;
  
    &lt;script&gt;
      Polymer({
        is: 'my-element',
        properties: {
          data: {
            type: Array,
            value: function() {
              return [];
            }
          }
        },
  
        onLoadData: function() {
          // Generate some dummy data for the sake of illustration.
          for (var i=1; i&lt;=3; i++) {
            var element = {
              id: i,
              state: 'Initialized',
              description: ''
            };
  
            element.children = [];
            for (var j=1; j&lt;=5; j++) {
              var child = {
                id: i + '-' + j,
                state: 'Initialized',
                description: ''
              }
              element.children.push(child);
            }
  
            data.push(element);
          }
        },
  
        // Setting an individual property value works
        onTest1Click: function() {
          this.set('data.0.children.0.state', 'data set');
        },
  
        // Setting an entire object value does NOT work.
        onTest2Click: function() {
          var c = this.data[0].children[0];
          c.state = 'data set';
          this.set('data.0.children.0', c);
        }
      });
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>For some reason, if I update the property value of an array element (as shown in <code>onTest1Click</code>), the UI is updated properly. However, if I update an entire element (as shown in <code>onTest2Click</code>), the UI does NOT get updated. In my real problem, I'm updating multiple properties on an element. For that reason, I'm trying to update an array element and not just a property. Am I doing something wrong or misunderstanding something? Or, am I going to have to update each property value individually?</p>