After cropping the result is 1/4 selected area

Hello, I implemented vue-croppie in my VUE-Project to crop images before appending them to the ElementId. Unfortunately I don't get a correct result.

Expected Behavior

Select area
Press Button to crop
append cropped image to ElementId

Actual Behavior

After selecting the desired area and pressing my Crop Button the result I get is most of the time 1/4 of the image. Sometimes I get even less as a result.

Selecting desired area:

Result:

VUE-Croppie:

<div id="cropper">
        <vue-croppie
          ref="croppieRef"
          :viewport="{ width: '300', height: '300', type: 'circle' }"
          :boundary="{ width: '400', height: '400' }"
          :showZoomer="true"
          :enableResize="false"
          :aspect-ratio="4 / 4"
          drag-mode="move"
          :view-mode="1"
          :movable="true"
          :crop-box-movable="false"
          :crop-box-resizable="false"
        >
        </vue-croppie>
</div>

Crop-Function:

crop: function() {
      let options = {
        type: "base64",
        size: { width: 600, height: 450 },
        format: "jpeg",
      };
      this.$refs.croppieRef.result(options, (output) => {
        this.cropped = this.croppieImage = output;
        document.getElementById("test-image").src = this.cropped;
      });
    },

Specifications

Browser: Google Chrome
Version: 100.0.4896.60
Browser: Firefox
Version: 98.0.2

Foliotek / Croppie

After cropping the result is 1/4 selected area #772