Polymer 1.0 - data-bound arrays not updating correctly - polymer

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);
}
});