q-table not work with reactive and server side pagination

[Jeewhan]

What happened?

First of all, I want to say thank you very much for making such a wonderful framework.

1. I wanted to apply the contents of the following document to the project. Server side pagination, filter and sorting
2. However, when the page was moved, the items in the table were properly changed, but the page information at the bottom of the table was not updated. (even though the pagination object was changed properly) This was also the case when I changed rowsPerPage.
3. After hours of experimenting, I realized that the pagination object was using refs in the example code, but I was using reactive. So I modified reactive to ref and pasted .value to the place to modify pagination objects, and it worked.

When the pagination object is declared through reactive, there is no problem in the first rendering, but there is a problem in the subsequent operation.

---

What did you expect to happen?

I was expecting the same behavior of declaring a pagination object reactive as declaring it as ref.

---

Reproduction URL

https://codepen.io/jeewhan/pen/NWXmgmB

How to reproduce?

Click the right arrow in the lower right corner of the table.

The list is updated, but the page information is not updated, and the next page is no longer loaded even when the right arrow is pressed.

---

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

---

Additional context

I think there are two ways to solve the problem.

1. Modify it so that it works even when reactive is used.

2. The document specifies that pagination objects must use ref.

If you agree that the situation needs to be fixed now, and if you can give me a guide and an opportunity to solve the problem, I would like to solve it myself.

[emahuni]

This is happening in v1 also with Vue2. I realised that when you don't specify the rowsNumber it works, but then this defeats the whole reason of using pagination. In this case I have the following object as the pagination object:

 data () {
      return {
        listPagination: {
          descending:  true,
          page:        1,
          rowsNumber:  12, // if I remove this, it sort of works
          rowsPerPage: 7,
          sortBy:      'updated_at',
        },
    }
}

note this is for an old application that uses v1.22.2

[yusufkandemir]

This is how Vue works. v-model/v-model:xyz doesn't work well with direct reactive() because update:model-value/update:xyz events trigger a reassign of the assigned value. But, values wrapped within reactive() can not be re-assigned, e.g. const x = reactive(...)(const can't be reassigned), let x = reactive(...) -> x = .../x = reactive(...)(will lose reactivity). v-model="reactiveObj" wouldn't work, but v-model="reactiveObj.stringProperty" would work.
In fact, with Vue 3.2.45, in production, Vue will throw an error if you provide a non-ref const variable to v-model/v-model:xyz. Here is the same example that runs on Vue 3.2.45 on a production build:
https://stackblitz.com/edit/quasarframework-cyczxu?file=src/pages/IndexPage.vue
See the console for TypeError: Assignment to constant variable error
Also, see the comments/discussion/PRs/etc. on the Vue repo, you can start from here vuejs/core#7429 (comment).

So, you should use ref not reactive with v-model:pagination and similar "v-model-able" properties that accept objects or arrays. IMO this behavior should be clearly documented on Vue Docs, but we can still give it a mention specifically for v-model:pagination on our docs, I guess. If you can create a PR for the documentation update, that would be great.

[yusufkandemir]

@emahuni yours doesn't look like and can't be the same problem, please open a separate issue with a clear reproduction.