You attempted to update `[]` on `<Array:ember652>`, but it had already been used previously in the same computation.

[adambedford]

I'm running into an error when the table changes at all, including when the component destroys on transition. Here's the full error:

Uncaught (in promise) Error: Assertion Failed: You attempted to update `[]` on `<Array:ember652>`, but it had already been used previously in the same computation.  Attempting to update a value after using it in a computation can cause logical errors, infinite revalidation bugs, and performance issues, and is not supported.

`[]` was first used:

- While rendering:
  application
    account
      account.workspaces
        account.workspaces.workspace
          account.workspaces.workspace.files
            files/table
              yeti-table
                ember-yeti-table@yeti-table/table/component
                  ember-yeti-table@yeti-table/body/component

Stack trace for the update:
    at dirtyTagFor (validator.js:544)
    at markObjectAsDirty (index.js:546)
    at notifyPropertyChange (index.js:584)
    at arrayContentDidChange (index.js:694)
    at replaceInNativeArray (index.js:759)
    at replace (index.js:736)
    at removeAt (array.js:87)

And here's the table template:

<YetiTable @loadData={{perform this.loadData}}
           @pagination={{true}}
           @pageSize={{20}}
           @totalRows={{this.totalRows}}
           class="table" as |table|>
  <table.header as |header|>
    <header.column @prop="createdAt" @sort="desc" as |column|>
      Created
      <Tables::SortIndicator @column={{column}} />
    </header.column>
    <header.column @prop="name" as |column|>
      Name
      <Tables::SortIndicator @column={{column}} />
    </header.column>
    <header.column @prop="owner.firstNameAndLastInitial">
      Uploaded By
    </header.column>
    <header.column @prop="file.url" />
  </table.header>

  <table.body as |body fileUpload|>
    <body.row as |row|>
      <row.cell>
        {{moment-from-now fileUpload.createdAt}}
      </row.cell>
      <row.cell>
        {{fileUpload.name}}
      </row.cell>
      <row.cell>
        {{fileUpload.owner.firstNameAndLastInitial}}
      </row.cell>
      <row.cell>
        <a href={{fileUpload.file.url}}>Download</a>
      </row.cell>
    </body.row>
  </table.body>

  <table.tfoot as |foot|>
    <foot.row as |row|>
      <row.cell colspan={{table.visibleColumns.length}}>
        <Tables::Pagination @table={{table}} />
      </row.cell>
    </foot.row>
  </table.tfoot>

  {{#if table.isLoading}}
    <tr>
      <td colspan={{table.visibleColumns.length}}>
        <div class="text-center">
          <LoadingIndicator />
        </div>
      </td>
    </tr>
  {{/if}}
</YetiTable>

Data fetching task looks like this:

@task
*loadData({paginationData, sortData, filterData}) {
  yield timeout(250)

  const sortBy = sortData.map(sortAttrs => {
    const direction = sortAttrs.direction === 'desc' ? '-': ''
    return `${direction}${sortAttrs.prop}`
  }).join(',')

  const records = yield this.store.query('file-upload', {
    include: 'owner',
    filter: {
      linked_to: this.args.linkedTo,
      name: filterData.filter
    },
    sort: sortBy,
    page: {
      number: paginationData.pageNumber,
      size: paginationData.pageSize
    }
  })
  this.totalRows = records.meta['record-count']
  return records
}

Basically, I followed the Async data loading tutorial and have been running into this error from the beginning. Any help or pointers would be greatly appreciated!

[hbrysiewicz]

Can you put together a ember-twiddle of your example not working? First things I see are that @pageSize={{20}} should either be @pageSize={{someProperty}} or @pageSize=20. But it would be easier to help if you had an example of the error in a small repo, jsbin, or ember-twiddle.