I'm trying to use cropperjs v2 within my Vue app, but I can't find the option and way for cropper to take full width and height of the image that is being cropped.

Can you help me and point me to the resources where I can find how to make basically something like this: https://agontuk.github.io/vue-cropperjs/

Here is my code:

<template>
    <div>
        <img ref="cropperImage" :src="imageUrl" alt="Cropper Image." class="block max-w-full" />
    </div>
</template>

<script lang="ts">
import Cropper from 'cropperjs';
import { Component, Prop, Ref, Vue } from 'vue-property-decorator';

@Component
export default class ImageCropper extends Vue {
    @Prop({ type: String, required: true }) readonly imageUrl!: string;
    @Ref() readonly cropperImage!: HTMLImageElement;

    cropper: Cropper | undefined;

    mounted() {
        this.cropper = new Cropper(this.cropperImage);
    }
}
</script>

And it produces this:

For this image:

https://i.picsum.photos/id/586/1600/900.jpg?hmac=rEPQN9kLTvjDkNQEqYhLukHWcJlKUtTGl-u2hmgXIkc