No rerender on a @tracked array update

[oliverlj]

The @Tracked array used as items do not rerender on update

[paulyoder]

@oliverlj How are you updating the array? If it's a native array, then you can't use the push() method. You need to create a new array object so @tracked knows it changed.

@tracked items = [];

addItem(item) {
  // doesn't work
  this.items.push(item)

  // works
  this.items = [...this.items, item];
}

[oliverlj]

I'm using a js getter of a @Tracked property. Normal table is rerender, vertical collection not

{{#if this.sortedTransactions}}
            {{!-- {{#vertical-collection
              this.sortedTransactions
              containerSelector=".transax"
              tagName="tbody"
              estimateHeight="3rem"
              staticHeight=true
              class="tx-body"
              as |tx|
            }}
              <tr class="line-height-tx">
                <TxTable::TxItem @tx={{tx}} />
              </tr>
            {{/vertical-collection}} --}}
            <tbody class="tx-body">
              {{#each this.sortedTransactions as |tx|}}
                {{#if this.state}}
                  <tr class="line-height-tx deactivate-line">
                    <TxTable::TxItem @tx={{tx}} />
                  </tr>
                {{else}}
                  <tr class="line-height-tx">
                    <TxTable::TxItem @tx={{tx}} />
                  </tr>
                {{/if}}
              {{/each}}
            </tbody>
          {{else}}

  get sortedTransactions() {
    if (this.catSortOrder !== SortOrder.NONE) {
      return this.filteredTransactions.slice().sort(Sorts.text((tx: TxDatum) => tx.category, this.catSortOrder));
    }

    if (this.dateSortOrder !== SortOrder.NONE) {
      return this.filteredTransactions.slice().sort(Sorts.date((tx: TxDatum) => tx.date, this.dateSortOrder));
    }

    if (this.pfSortOrder !== SortOrder.NONE) {
      return this.filteredTransactions.slice().sort(Sorts.text((tx: TxDatum) => tx.wallet, this.pfSortOrder));
    }

    return this.filteredTransactions;
  }

[oliverlj]

works good on v3