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

<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);
        });
    }
}