Element UI组件分页bug，点击切换size渲染不到数据

今天用分页组件的时候遇到了一个小bug，就是当我点击页数(page)的时候，点击到最后一个的时候，这时如果切换一页显示的条数(size),页面会出现数据渲染不出来的情况。操作如下图：先点击第7页，再点击切换条数的下拉选择器。
自己的一个解决方法就是当用户切换size数的时候，用监听器watch，把page重置为1，这样就可以避免这个问题，如果各位大佬还有更好的解决方案，欢迎留言赐教。O(∩_∩)O哈哈~

下面附上自己做分页的代码，这个分页接口的话是后端做的，前端只用传参(size,page)就好

 <el-pagination
        background
        style="float: right"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 500]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

watch:{
	 size() {
      this.currentPage = 1
      this.init()
    }
},
methods: {
    // 初始化数据
    init() {
      const params = {
        // type: "运输方式"
        size: this.size,
        page: this.currentPage - 1,   
      }
      api.getDataList(params).then((res) => {
        console.log('res', res)
        this.tableData = res.content
        this.total = res.totalElements
        // this.options = res.content;
        // res.content.map((ele) => {
        //   this.options.push(ele.type);
        // });
        // for (let i = 0; i < res.content.length; i++) {
        //   let newArr = res.content[i].type;
        //   this.options.push(newArr);
        // }

        console.log('this.options', this.options)
        console.log('this.tableData', this.tableData)
        console.log('this.codeTypeValue', this.codeTypeValue)
      })
    },
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.size = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.init()
    }
   }