Vue组件中CropperJS的crop()回调未触发导致预览图无法更新的问题求助

大家好，我正在用Vue结合CropperJS开发一个图片裁剪组件，目前裁剪界面能正常渲染，图片也能正确加载显示，但遇到了个棘手的问题——预览图一直是空的。我检查代码后发现，Cropper配置里的crop()回调函数从来没被调用过，这应该就是预览图无法更新的根源了。

下面是我简化后的组件代码：

<template>
  <div>
    <div class="image-container">
      <img ref="image" :src="src"/>
    </div>
    <img :src="destination" alt="preview">
  </div>
</template>

<script>
import Cropper from 'cropperjs'
import '../assets/cropper.css'

export default {
  name: 'ImageCropper',
  props: {
    src: String
  },
  data() {
    return {
      cropper: {},
      destination: {},
      image: {}
    }
  },
  mounted() {
    this.image = this.$refs.image;
    this.cropper = new Cropper(this.image, {
      zoomable: false,
      scalable: false,
      viewMode: 1,
      aspectRatio: 1,
      crop: () => {
        console.log("crop() called")
        const canvas = this.cropper.getCroppedCanvas();
        this.destination = canvas.toDataURL("image/png")
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.image-container {
  width: 800px;
  height: 800px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
  :deep(cropper-canvas) {
    height: 100%;
    width: 100%;
  }
}
</style>

我已经确认图片的src是有效的，Cropper的基础UI也能正常交互，但就是拖动裁剪框或者调整大小的时候，crop事件完全没反应，控制台也没打印那句日志。有没有朋友能帮我找找问题所在呀？

内容来源于stack exchange