The operation of going to the next page is normal, but returning to the previous page is problematic

[YeAhzjx]

I can not take the company's double-leaf pdf for display, so I took a single-page pdf for display
By the way, I'm terrible at it. Forgive me
my browser:chrome 123.0.6312.123
my code:

<template>
  <div class="box">
    <div id="flipbook"></div>
  </div>
</template>
<script>
import Loading from "@/components/Loading.vue";
import $ from "jquery";
import turn from "@/utils/turnjs4/lib/turn.js";
import * as pdfjs from "pdfjs-dist";
import * as pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
let loading;
export default {
  components: { Loading },
  data() {
    return {
      pageCav: [],
      currentPage: 1,
      // url_01: "/static/kejihuace.pdf",
      url_01: "/static/pdf/web/compressed.tracemonkey-pldi-09.pdf",
      width: "",
      height: ""
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.pdfInit(this.url_01);
    });
  },
  methods: {
    async pdfInit(url) {
      const pdfContainer = document.querySelector("#flipbook");
      if (!pdfContainer) {
        return;
      }
      const loadingTask = pdfjs.getDocument({
        url: url
      });
      const pdf = await loadingTask.promise;
      const container = document.querySelector("#flipbook");
      this.setLoading();
      for (let index = 0; index < pdf.numPages; index++) {
        const page = await pdf.getPage(index + 1);
        const viewport = page.getViewport({ scale: 1.2 });
        console.log(viewport);
        const divPage = document.createElement("div");
        divPage.classList.add("page");
        const divPageContent = document.createElement("div");
        divPageContent.classList.add("page-content");
        const canvas = document.createElement("canvas");
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        this.width = viewport.width;
        this.height = viewport.height;
        const context = canvas.getContext("2d");
        if (!context) {
          return;
        }
        const renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        await page.render(renderContext).promise;
        divPageContent.appendChild(canvas);
        divPage.appendChild(divPageContent);
        container.appendChild(divPage);
      }
      this.pageCav = document.querySelectorAll("#flipbook .page");
      this.onTurn();
    },
    onTurn() {
      $("#flipbook").turn({
        autoCenter: true,
        height: this.height,
        width: this.width,
        display: "double",
        elevation: 50,
        duration: 500,
        gradients: true,
        acceleration: true,
        page: 1,
        pages: this.pageCav.length,
        turnCorners: "bl,br,tl,tr,l,r",
        when: {
          turning: async (e, page, view) => {
            console.log(e, page, view);
          },
          turned: (e, page) => {
            console.log(e, page, this.pageCav.length);
            this.currentPage = page;
            this.closeLoading();
          }
        }
      });
    },
    setLoading() {
      loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    closeLoading() {
      loading.close();
    }
  }
};
</script>
<style scoped>
.box {
  /* width: 1190px; */
  box-shadow: 0 4px 10px #666;
  margin: 0 auto;
  overflow: hidden;
  background-color: #ccc;
  display: flex;
  padding: 50px 0;
  justify-content: center;
  align-items: center;
}
#flipbook {
  -webkit-transition: margin-left 0.2s;
  -moz-transition: margin-left 0.2s;
  -ms-transition: margin-left 0.2s;
  -o-transition: margin-left 0.2s;
  transition: margin-left 0.2s;
}
</style>

I don't know what the problem is
This is the bug demo video

bug.mp4