title: Polymer nested dom-repeat templates are not updating when adding items to sub array
body: <h1>Context</h1>
  <p>I am making a page that displays a list of items. The page lists the items newest to oldest, and categorizes them first by year then by month. It would look something like the following example:</p>
  <h3>2019</h3>
  <p><strong>March</strong></p>
  <ul>
  <li>list item</li>
  <li>list item 2</li>
  </ul>
  <p><strong>February</strong></p>
  <ul>
  <li>list item 3</li>
  </ul>
  <h3>2018</h3>
  <p><strong>October</strong></p>
  <ul>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
  </ul>
  <p><strong>May</strong></p>
  <ul>
  <li>list item 7</li>
  </ul>
  <p>A simplified version of the HTML is:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template is="dom-repeat" items="{{years}}" as="year"&gt;
      &lt;span&gt;[[year.name]]&lt;/span&gt;
      &lt;div id="same-year-items&gt;
          &lt;template is="dom-repeat" items="{{year.months}}" as="month"&gt;
              &lt;span&gt;[[month.name]]&lt;/span&gt;
              &lt;div id="same-month-items"&gt;
                  &lt;template is="dom-repeat" items="{{month.items}}" as="item"&gt;
                      &lt;custom-list-item item="{{item}}"&gt;&lt;/custom-list-item&gt;
                  &lt;/template&gt;
              &lt;/div&gt;
          &lt;/template&gt;
      &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>In the Javascript file I define a <code>years</code> array property. Each year in <code>years</code> contains a <code>months</code> array, and each month in <code>months</code> contains an <code>items</code> array (see the dom-repeat elements). I query a database for some list items, loop through each item, and then add it to the corresponding month array.</p>
  <h1>The issue</h1>
  <p>This page only loads the first n items. I want to have a &quot;load more&quot; button at the bottom which loads the next n items. (Yes, I know. Infinite scrolling is probably better--that will come later. Even if I were to use infinite scrolling I would still have the issue I'm about to describe.)</p>
  <p>When I load more items, the page doesn't update to show the new items. I know Polymer is very particular about how you bind data, especially when it involves sub properties. This is a simplified version of the Javascript which deals with setting the new items to the arrays:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setItems: function(newItems) {
    var tempYearsArray = [];
    for (var i = 0, i &lt; this.years.length; i++) {
      tempYearsArray.push(this.years[i]);
    }
    
    this.set('years', []);
    
    for (var j = 0; j &lt; newItems.length; j++) {
      var item = newItems[j];
      this.setMonthAndYear(item, tempYearsArray);
    }
    
    this.set('years', tempYearsArray);
  }
  
  setMonthAndYear: function(item, tempYearsArray) {
    var itemDate = new Date(item.lastModified);
    var currentYear = itemDate.getFullYear();
    var monthIndex = itemDate.getMonth();
    var monthName = this.monthNames[monthIndex];
    var newYear = true;
    var newMonth = true;
    for (var i = 0; i &lt; tempYearsArray.length; i++) {
      var year = tempYearsArray[i];
      if (currentYear === year.name) {
        newYear = false;
        for (j = 0, j &lt; year.months.length; j++) {
          var month = ref[j];
          if (monthName === month.name) {
            month.items.push(item);
            newMonth = false;
            break;
          }
        }
        if (newMonth) {
          var month = {
            items: [item],
            name: monthName
          };
          year.months.push(month);
        }
        break;
      }
    }
    if (newYear) {
      var month = {
        items: [item],
        name: monthName
      };
      year = {
        name: currentYear,
        months: [month]
      };
      return tempYearsArray.push(year);
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>I can see that <code>years</code> has the new items, but the page still doesn't render them. I've read other posts with similar problems, which is where I got the idea of <code>this.set('years', [])</code> and the temporary array. I've also tried doing stuff like <code>this.notifyPath('year.months', year.months.slice())</code> and <code>this.notifyPath('month.items', month.items.slice())</code>. I'm not sure why this would work, but I saw that suggested in <a href="https://github.com/Polymer/polymer/issues/2068" rel="nofollow noreferrer">this Github issues post</a>.</p>
  <p>Also if you have a better suggestion than a years array which contains a months array which contains the item array, all the better.</p>