Simple pagination behaving strangely when changing pages

I'm trying to paginate form.sale_point_routes since they can quite long (400+) but what's happening is that it adds the new items below the current ones and then removes the current ones and leave the new ones so it looks weird.

here is a video of what I mean (sorry it expires in 2 days so on 01/27/24) https://streamable.com/rum6ie here is another video with more items that shows it better https://streamable.com/jq1o02

What am I doing wrong? How can I fix it so that it doesn't do that

data() {
    return {
      form: this.$inertia.form({
        description: null,
        team_user_id: null,
        is_generated: true,
        sale_points: [],
        sale_point_routes: []
      }),
      page: 1,
      perPage: 3,
      pages: [],
    };
  },
methods: {
    set_pages() {
      let pages_num = Math.ceil(this.form.sale_point_routes.length / this.perPage);

      for (let index = 1; index <= pages_num; index++) {
        this.pages.push(index);
      }
    },
    paginate(items) {
      let from = (this.page * this.perPage) - this.perPage;
      let to = (this.page * this.perPage);
      console.log(from, to)
      return items.slice(from, to);
    }
  },
computed: {
    get_routes() {
      return this.paginate(this.form.sale_point_routes)
    }
  },
watch: {
    'form.sale_points'(sale_points) {
      const sale_point_routes = [];

      for (const sale_point of sale_points) {
        let sale_point_route = this.form.sale_point_routes.find(route => route.sale_point_id === sale_point.id);

        if (sale_point_route === undefined) {
          sale_point_route = {...};
        }

        sale_point_routes.push(sale_point_route);
      }

      this.form.sale_point_routes = sale_point_routes;
      this.set_pages();
    }
  },