multiple, dynamic q-table pagination

[ssuess]

I have multiple q-tables that are being created in a v-for loop, like so:

 <q-table v-for="(val, key) in myGroup[value.groupID]" :key="key" :ref="value.groupID"
      :title="`${key} has ${val.length} items`"
      :rows="val"
      :columns="columns"
      :filter="filter"
      row-key="last_updated"
      no-data-label="no data"
      no-results-label="The filter didn't uncover any results"
      v-model:pagination="pagination"
      rows-per-page-label="per page:"
      :hide-bottom="val.length < 5"
    >...

But the pagination will affect all other tables in the same component, and I want to have pagination values set for each table individually without affecting the other tables. Is there an easy way to do this? I don't know in advance how many tables there will be btw.

[ssuess]

Well, I feel stupid. In this case I was able to simply remove the v-model:pagination="pagination" part of my table and they all work as expected. Hope this helps someone else.

[ssuess]

Revisiting this because although that allows each table to manage it's pagination independently, I can no longer trigger a watch on the pagination (to be able to move other elements on screen, for example)

[ssuess]

I could make this work with a dynamically built pagination object containing one for each table, and then attach a deep nested watcher, but the performance of this is terrible. I have sometimes as many as 50 tables on one page. Is there really nothing I can grab onto just to let me know that the paging has changed anywhere on the page without doing this? Something the table paging component can emit?

[ssuess]

Not sure the performance is any better, but I will try a resize observer on the enclosing div