Polymer 1.0 - data-bound arrays not updating correctly

Question

Demo here: http://jsbin.com/wiqowo/15/edit?html,output

When I loop through this.data in the example below, it iterates over the correct number of items, however the value of the individual items is not output. Is this a bug, or am I missing something?

<dom-module id="test-element">
  <template>
    <h3>data</h3>
    <p>data: <span>{{data}}</span></p>
    <ul>
      <template is="dom-repeat" items="{{data}}">
        <li>{{item}}</li>
      </template>
    </ul>
  </template>
  <script>
    Polymer({
      ready: function() {
        this.data = ['Item #1', 'Item #2', 'Item #3'];
        for (var i=this.data.length; i<10; i++) {
          this.data.push('Item #' + (i+1));
        }
        console.log(this.data);
      }
    });
  </script>
</dom-module>

Answer 1

Figured it out. Apparently array mutation is not supported in 1.0. You have to call the new Polymer.push, Polymer.pop, etc. methods.

Demo: http://jsbin.com/wiqowo/25/edit?html,output

for (var i=this.data.length; i<10; i++) {
    this.push('data', 'Item #' + (i+1));
}

Answer 2

Define an array var inside of the the ready function, and push data to it. Then, assign it to this.data.

Polymer({
  ready: function() {
    var localData = ['Item #1', 'Item #2', 'Item #3'];
    for (var i=localData.length; i<10; i++) {
      localData.push('Item #' + (i+1));
    }

    this.data = localData;

    console.log(this.data);
  }
});