Overview of the problem

Oruga version: [0.11.3]
Vuejs version: [3.5.12]
OS/Browser: Windows/Chrome latest

Description

Checkable table does not select all rows when a table is defined with a dynamic per-page and the value is changed.

Steps to reproduce

Define a table as follows:

<o-table
  :data="data"
  :per-page="rowsPerPage"
  paginated
  checkable
  v-model:checked-rows="rowsToUse"
  @check="rowChecked"
  @check-all="rowsChecked"
>
  <!-- snipped -->
  <template #bottom-left>
    <span>
      Display:
      <o-select v-model="rowsPerPage" size="small">
        <option key="10" value="10">10 rows</option>
        <option key="50" value="50">50 rows</option>
        <option key="100" value="100">100 rows</option>
      </o-select>
      <span> ({{ data.length }} rows)</span>
    </span>
  </template>
</o-table>

Expected behavior

Changing the value of the rowsPerPage using the select should change the array that is passed to the rowsChecked function.

Actual behavior

• on initial view, the header select checkbox works with the initial value of rowsPerPage.
• After changing the value in the footer, clicking the header checkbox continues to select the rowsPerPage defined when the component was mounted.

This was tested in both ways:

• define the initial rowsPerPage to (say 10), and have 20 rows in the table. Switching the rowsPerPage to 50 only selects 10 rows.
• define the initial rowsPerPage to (say 50), and have 20 rows in the table. Switching the rowsPerPage to 10 continues to selects 20 rows.

Note that the table updates the number of rows displayed correctly, but the array that is passed to the @CHECK-ALL event is sized to the initial value of rowsPerPage.