Pagination - @input called for each pagination component

When using two pagination components (e.g. above and below a table) that show the same pagination data, the @input will be called twice.

<b-pagination :total-rows="100" :value="page" :per-page="10" @input="toPage"></b-pagination>
<!-- e.g. table -->
<b-pagination :total-rows="100" :value="page" :per-page="10" @input="toPage"></b-pagination>

In this case toPage will be called twice when using either one of the pagination components:

[tmorehouse]

Components are self contained, and two pagination components do not know about each other, but in your case they are bound to the same value, so a change in that value will trigger a change on both components, hence each firing the @input event whenever the value changes. It would be similar to biding two text inputs to the same value. CHanging the content of one text input would also change the content of the other text input. It is not a bug, as it is the nature of reactivity in Vue.js

[tmorehouse]

Then, use a watcher on your value, and if it changes then call toPage(#) in your watcher function.