title: Adding an item to array does not re-render polymer template
body: <p>I am trying to render a dynamic list of items using a template of <code>dom-repeat</code> like this:</p>
  
  <pre><code>&lt;template is="dom-repeat" items={{numbers}} as="anumber" &gt;
    &lt;div&gt;
      {{anumber}}
      &lt;paper-button class="deleteThisNumber" index={{index}}&gt;&lt;/paper-button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;paper-button id="addNumber"&gt;&lt;/paper-button&gt;
  </code></pre>
  
  <p>Each item has a button which will delete this item. </p>
  
  <p>There is also a button <strong>outside</strong> of the <code>dom-repeat</code> template that tries to add an entry to array <code>numbers</code>. The JS looks like this:</p>
  
  <pre><code>Polymer ({
  
  is: "something",
  
  properties: {
      numbers: {
          type: Array,
          value: ["1"]
      }
  },
  removeByIndex: function (array, index) {
      return array.filter(function (elem, _index) {
          return index != _index;
      });
  },
  attached: function () {
      var myself = this;
      $(this).on('click', '.deleteThisNumber', {}, function (e) {
          myself.numbers = myself.removeByIndex(myself.numbers, this.index)
      });
      this.$.addNumber.addEventListener("click", function (e) {
          myself.numbers.push("123");
      })
  },
  ...
  });
  </code></pre>
  
  <p><strong>The result is:</strong> deleting works, but adding does not.</p>
  
  <p>By saying "works", I mean the list reflects the change by adding/removing an entry in the <code>DOM</code>. I checked the property <code>numbers</code> it is correctly modified all the time. So why does Polymer not reflect changes of an array property to a template if the change is addition(array.push)? How should I fix this? (I am open to any suggestions other than manually adding divs.)</p>
  
  <p>My Polymer version is 1.X</p>