Cropper.js not displaying new photo?

Question

JavaScript

why, if I once selected a photo for cropping, then the second time I try to crop a new photo and add the old one, it still displays the first photo exactly?

<div id="cropper_avatar" class="white-popup mfp-hide">
            <form action="" method="post" >
                <div class="modal-content">
                    <div class="modal-header">
                        <p>Сменить E-mail</p>
                    </div>
                    <div class="modal-body">
                        <div class="item">
                            <img id="crrop-image" src="">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="btn-flex">
                            <button type="button" class="btn-blue" @click.prevent="cropResize()"  id="crop">Сохранить</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

loadAvatar(event) {
                this.cropper = '';
                let image = '';
                image = document.getElementById('crrop-image');
                let files = event.target.files;
                let done = function (url) {
                    image.src = url;
                };
                let reader;
                let file;

                if (files && files.length > 0) {
                    file = files[0];

                    if (URL) {
                        done(URL.createObjectURL(file));
                    } else if (FileReader) {
                        reader = new FileReader();
                        reader.onload = function (event) {
                            done(reader.result);
                        };
                        reader.readAsDataURL(file);
                    }
                }
                console.log(image);
                $.magnificPopup.open({
                    items: {
                        src: '#cropper_avatar',
                        type: 'inline'
                    }
                });
                this.cropper = new Cropper(image, {
                    aspectRatio: 1,
                    viewMode: 3,
                });
                console.log(this.cropper);
            },
            cropResize(){
                let canvas = '';
                const that = this;
                if (this.cropper) {
                    $.magnificPopup.close();
                    canvas = this.cropper.getCroppedCanvas({
                        width: 160,
                        height: 160,
                    });

                    canvas.toBlob(function (blob) {
                        const formData = new FormData();
                        formData.append('image', blob);
                        const config = { 'content-type': 'multipart/form-data' }
                        axios.post('/cabinet/user/avatar/upload',formData,config)
                            .then((response) => {
                                if (response.data.error === 0){
                                    that.profile.avatar = '/storage/'+response.data.avatar;
                                    $('.img__avatar').css('background-image','url(/storage/' + response.data.avatar + ')');
                                    that.loading = false;
                                    toast.fire({
                                        type: 'success',
                                        title: response.data.message
                                    });
                                }else{
                                    toast.fire({
                                        type: 'error',
                                        title: response.data.message
                                    });
                                    that.loading = false;
                                }
                            })
                            .catch(error => {});
                    });

                }
            },