title: Inquiry regarding array reactivity in Vue.js 2
body: <p>I have written a <a href="https://github.com/matfish2/vue-tables-2" rel="nofollow noreferrer">grid component</a>  that supports child rows, i.e a togglable row with a cell that spans the entire width of the table, under each normal row. In order to keep track of the child rows state I am using a data property called <code>openChildRows</code> which defaults to an empty array. When the user clicks on the toggle icon which is present on the first column of each row, the child row of that row opens. An additional click closes it. The <code>openChildRows</code> array contains the ids of the open rows.</p>
  
  <p>The issue I am having is that when I use a component for the child row, all open rows that come <strong>after</strong> the one toggled will be remounted. This is clearly inefficient, especially if the child row component sends an ajax request when mounted. Ideally, what I would want is that only the new child row will be mounted.</p>
  
  <p>I have written the grid using JSX for templates. Below is the relevant code:</p>
  
  <p>Rows template:</p>
  
  <pre><code>module.exports = function(h, that) {
      var rows = [];
      var columns;
      var rowKey = that.opts.uniqueKey;
  
      var rowClass;
      var data = that.source=='client'?that.filteredData:that.tableData;
      var recordCount = (that.Page-1) * that.limit;
  
      data.map(function(row, index) {
  
        index = recordCount + index + 1;
  
        columns = [];
  
        if (that.hasChildRow) {
          var childRowToggler = &lt;td&gt;&lt;span on-click={that.toggleChildRow.bind(that,row[rowKey])} class={`VueTables__child-row-toggler ` + that.childRowTogglerClass(row[rowKey])}&gt;&lt;/span&gt;&lt;/td&gt;;
          if (that.opts.childRowTogglerFirst) columns.push(childRowToggler);
        }
  
  
        that.allColumns.map(function(column) {
            let rowTemplate = that.$scopedSlots &amp;&amp; that.$scopedSlots[column];
  
            columns.push(&lt;td class={that.columnClass(column)}&gt;
              {rowTemplate ? rowTemplate({ row, column, index }) : that.render(row, column, index, h)}
          &lt;/td&gt;)
        }.bind(that));
  
        if (that.hasChildRow &amp;&amp; !that.opts.childRowTogglerFirst) columns.push(childRowToggler);
  
        rowClass = that.opts.rowClassCallback?that.opts.rowClassCallback(row):'';
  
        rows.push(&lt;tr class={rowClass} on-click={that.rowWasClicked.bind(that, row)} on-dblclick={that.rowWasClicked.bind(that, row)}&gt;{columns} &lt;/tr&gt;);
  
      // Below is the code that renders open child rows
        if (that.hasChildRow &amp;&amp; this.openChildRows.includes(row[rowKey])) {
  
          let template = this._getChildRowTemplate(h, row);
  
          rows.push(&lt;tr class='VueTables__child-row'&gt;&lt;td colspan={that.allColumns.length+1}&gt;{template}&lt;/td&gt;&lt;/tr&gt;);
        }
  
      }.bind(that))
  
      return rows;
  
  }
  </code></pre>
  
  <p>Toggle method code:</p>
  
  <pre><code>  module.exports = function (rowId, e) {
  
    if (e) e.stopPropagation();
  
    if (this.openChildRows.includes(rowId)) {
      var index = this.openChildRows.indexOf(rowId);
      this.openChildRows.splice(index,1);
    } else {
      this.openChildRows.push(rowId);
    }
  };
  </code></pre>
  
  <p>The <code>_getChildRowTemplate</code> method:</p>
  
  <pre><code>module.exports = function (h, row) {
    // scoped slot
    if (this.$scopedSlots.child_row) return this.$scopedSlots.child_row({ row: row });
  
    var childRow = this.opts.childRow;
  
    // render function
    if (typeof childRow === 'function') return childRow.apply(this, [h, row]);
  
    // component
    return h(childRow, {
      attrs: {
        data: row
      }
    });
  };
  </code></pre>