Vue.js- How is the value of v-model and this.pageNumber are changing according to the pagination?

Question

<v-pagination
     v-model="pageNumber"
     :length="numberOfPages"
     color="primary"
      totalVisible="5"
      class="paginationComponent"
      @update:modelValue="changePage()">
</v-pagination>

<script>
export default {
  data: () => ({
    pageNumber: 1,
 })
}
methods: {
    init() {
      axios({
        method: "get",
        url: "/products",
        params: {
          size: 10,
          page: this.pageNumber - 1,
        },
      })
        .then((response) => {
          console.log('Success');
        })
        .catch((error) => {
          console.error(error);
        });
    },
    changePage() {
      console.log(this.pageNumber);
      this.init();
    },
</script>

Pagination Image

I am pretty new to Vue.js. Every time I click on a page number, the exact number is being logged into the console. I am unable to understand how it is recognizing that number. I thought there is a logic in the method which adds or subtracts the number to/from the default pageNumber value. But there's no such thing. With correct pageNumber the api takes care of rest of the work.

Before this process, I tried accessing the text content of the pageNumber element with children elements all the unnecessary weird stuff.

Answer 1

<v-pagination
     v-model="pageNumber"
      @update:modelValue="changePage()">
</v-pagination>

Same as

<v-pagination
     v-bind:value="pageNumber"
      @update:modelValue="number => { pageNumber = number;changePage(); }">
</v-pagination>

In v-pagination component, click page number button

//Click handler code
emit('update:modelValue', pageNumber);

Recommended

<v-pagination
     v-model="pageNumber"
     :length="numberOfPages"
     color="primary"
     totalVisible="5"
     class="paginationComponent">
</v-pagination>

<script>
export default {
  data: () => ({
    pageNumber: 1,
  }),
  watch: {
      pageNumber(newValue, oldValue) {
          console.log(newValue);
          this.init(newValue);
      }
  },
  methods: {
    init(pageNumber) {
      axios({
        method: "get",
        url: "/products",
        params: {
          size: 10,
          page: pageNumber - 1,
        },
      })
        .then((response) => {
          console.log('Success');
        })
        .catch((error) => {
          console.error(error);
        });
    }
}