Image not being dragged correctly when zoomed in

HTML

<div ref="croquisContainer" id="image-remolque" class="zoom-container image-remolque" style="border:5px solid red;position:relative;max-width:500px" @wheel="zoom($event)" @mousedown="dragStart($event)" @mousemove="dragMove($event)" @mouseup="dragEnd($event)" @mouseleave="dragEnd($event)" :style="imageDraggable">
        <img ref="croquisImage" :style="zoomStyle" src="https://www.simplilearn.com/ice9/free_resources_article_thumb/what_is_image_Processing.jpg" width="100%" class="zoom-image"/>
        <v-chip ref="zoomBar" class="zoom-bar hide-zoom-bar" color="#444" text-color="#FFF" small label link @click="resetZoom">{{getImageScalePercent}}</v-chip>
        <div class="zoom-buttons d-flex align-center">
          <v-btn style="background-color:#555;color:#FFF" small icon @click="zoomIn(zoomStep)" :style="disableZoomIn"><i class="far fa-search-plus"></i></v-btn>
          <v-btn style="background-color:#555;color:#FFF" class="ml-2" small icon @click="zoomOut(zoomStep)" :style="disableZoomOut"><i class="far fa-search-minus"></i></v-btn>
        </div>
</div>

CSS

.zoom-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  .zoom-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    transition: transform 0.2s ease;
  }

  .zoom-bar {
    position:absolute;
    top: 8px;
    right: 8px;
    z-index:2;
    opacity:1;
    transition: opacity 0.2s ease;
  }

  .hide-zoom-bar {
    opacity:0;
    user-select: none;
  }

  .zoom-buttons {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
  }

  .add-point-button {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
  }

Vue

new Vue({
	el: "#image-remolque",
  data() {
    return {
      imageScale: 1,
      isDragging: false,
      lastX: 0,
      lastY: 0,
      offsetX: 0,
      offsetY: 0,
      zoomStep: 0.1,
      minZoom: 1,
      maxZoom: 3,
    }
  },
  mounted() {
    this.$refs.croquisImage.ondragstart = () => { return false };
  },
  computed: {
    zoomStyle() {
      return {
        transform: `scale(${this.imageScale}) translate(${this.offsetX}px, ${this.offsetY}px)`,
      };
    },
    getImageScalePercent() {
      return (this.imageScale * 100).toFixed(0) + '%';
    },
    disableZoomIn() {
      if (this.imageScale === this.maxZoom) {
        return {
          opacity: 0.5,
          'user-select': 'none',
          'pointer-events': 'none'
        };
      }
    },
    disableZoomOut() {
      if (this.imageScale === this.minZoom) {
        return {
          opacity: 0.5,
          'user-select': 'none',
          'pointer-events': 'none'
        };
      }
    },
    imageDraggable() {
      if(this.imageScale === this.minZoom) {
        return {
          'cursor': 'default'
        };
      } else if(this.isDragging) {
        return {
          'cursor': 'grabbing'
        };
      } else {
        return {
          'cursor': 'grab'
        };
      }
    },
  },
  methods: {
    dragStart(event) {
      if(this.imageScale > this.minZoom) {
        event.preventDefault();
        event.stopPropagation();

        this.isDragging = true;
        this.lastX = event.clientX;
        this.lastY = event.clientY;
      }
    },
    dragMove(event) {
      if (this.isDragging && this.imageScale > this.minZoom) {
        event.preventDefault();
        event.stopPropagation();
        
        const containerRect = this.$refs.croquisContainer.getBoundingClientRect();
        const imageRect = this.$refs.croquisImage.getBoundingClientRect();

        const maxOffsetX = (imageRect.width - containerRect.width) / 2;
        const maxOffsetY = (imageRect.height -...