after clicking Back and Cancel button and re-opening modal the modal show initial drag-drop / browse state box instead of image preview step about vue-image-crop-upload HOT 6 OPEN

    <div
        class="transition flex items-center gap-2 !rounded cursor-pointer py-3 px-5 bg-grey-100 text-sm
               hover:text-grey-800
               border-grey-200  border-dotted border-2"
        @click="toggleShow">
        <Icon name="upload"/>
        <span v-text="dataUrl ? 'Edit photo' : 'Upload photo'"></span>
    </div>
    <my-upload
        field="img"
        :max-size="5000"
        @crop-success="cropSuccess"
        @crop-upload-success="cropUploadSuccess"
        @crop-upload-fail="cropUploadFail"
        @src-file-set="srcFileSet"
        v-model="show"
        :height="100"
        :width="100"
        :params="params"
        :headers="headers"
        lang-type="en"
        :lang-ext="langExt"
        :no-circle="true"
        img-format="png">
    </my-upload>
</template>

<script>
import myUpload from 'vue-image-crop-upload';
import PrimaryButton from "../../Admin/Buttons/PrimaryButton";
import Icon from "./Icon";
import {ref} from "vue"

let key = ref(1);

export default {
    data() {
        return {
            show: false,
            params: {
                token: '123456798',
                name: 'avatar'
            },
            step: 0,
            headers: {
                smail: '*_~'
            },
            field: '',
            langExt: {
                hint: 'Drag and drop or browse to choose a file',
                loading: 'Uploading…',
                noSupported: 'Browser is not supported, please use IE10+ or other browsers',
                success: 'Upload success',
                fail: 'Upload failed',
                preview: 'Preview',
                btn: {
                    off: 'Cancel',
                    close: 'Close',
                    back: 'Back',
                    save: 'Save'
                },
                error: {
                    onlyImg: ' Image support Jpg, Jpeg, Png only. ',
                    outOfSize: 'Image exceeds size limit: ',
                    lowestPx: 'Image\'s size is too low. Expected at least: '
                }
            }
        }
    },
    props: {dataUrl: {Type: String, required: false}},
    emits: ['crop'],
    components: {
        Icon,
        PrimaryButton,
        'my-upload': myUpload
    },
    methods: {
        toggleShow() {
            this.show = !this.show;
        },

        cropSuccess(imgDataUrl) {
            this.$emit('crop', imgDataUrl)
        },

       
        cropUploadSuccess(jsonData, field) {
            key.value = new Date().getTime();
        },
      
        cropUploadFail(status, field) {
          
        },

        srcFileSet(fileName, fileType, fileSize) {
   
        }
    }
}
</script>```

<crop-upload
            @crop-success="cropSuccess"
            v-if="showAvatarUpload"
            v-model="showAvatarUpload"
            lang-type="en"
            :width="300"
            :height="300"
            :params="{}"
            img-format="jpg"
        />

    at Proxy.data (upload-2.vue?0b4d:224)
    at resolveData (runtime-core.esm-bundler.js?5c40:6046)
    at applyOptions (runtime-core.esm-bundler.js?5c40:5864)
    at finishComponentSetup (runtime-core.esm-bundler.js?5c40:6636)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6567)
    at setupComponent (runtime-core.esm-bundler.js?5c40:6503)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4206)
    at processComponent (runtime-core.esm-bundler.js?5c40:4182)
    at patch (runtime-core.esm-bundler.js?5c40:3791)
    at mountChildren (runtime-core.esm-bundler.js?5c40:3975)```