vue3使用elment-plus分页器不能显示

今天在写分页的时候，发现element-plus的分页器无法显示
问题如下：

 <div>
          {{pageInfo.totalNum}}
          <el-pagination background layout="prev, pager, next" :page-count="2"/>
        </div>

正常显示

但是我一旦绑定ref或者reactive函数声明的变量，分页器直接就无了

<div>
          {{pageInfo.totalNum}}
          <el-pagination background layout="prev, pager, next" :page-count="pageInfo.totalNum"/>
        </div>


let pageInfo = reactive({
  totalNum:0,

})
onMounted(() => {
  getMenus()
})

function getMenus() {
  getAllMenus(0, 10).then(res => {
    menus.value = res.data.data.records
    pageInfo.totalNum=res.data.data.pages
  })
}

再看元素，居然直接不翼而飞

不知道是个什么情况

Vue 3 的 reactive 方法是一个响应式方法，用于将对象转换为响应式对象。这样，当 pageInfo.totalNum 的值改变时，视图应该会自动更新。你可以试着改变一下totalNum的初始值。

可以参考一下

<el-pagination
              v-model:currentPage="pages.pageNumber"
              v-model:page-size="pages.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :small="true"
              :disabled="false"
              :background="false"
              layout="total, sizes, prev, pager, next"
              :total="pages.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />