how to run function when everytime props change in ant-design-vue modal - vue.js

Question

i have a vue app containing image uploader with crops function. it's succeed to upload and crop the picture and get back the cropped image URL. but the problem is when the user need to re upload their image, the canvas still display the old image. it is also happen when user cancel and reupload the image.
<template>
<div>
<a-row :gutter="16">
<a-col :span="12">
<img ref="image" :src="initialImage">
</a-col>
<a-col :span="12" align="center">
<p><strong>Preview</strong></p>
<img :src="updatedImage" class="preview-image">
</a-col>
</a-row><br />
<a-row :gutter="16">
<a-button type="primary" style="float: right;" #click="crop">Crop</a-button>
<a-button style="float: right; margin-right: 5px;" #click="cancel">Cancel</a-button>
</a-row>
</div>
</template>
<script>
import Cropper from 'cropperjs';
export default {
name: 'PostCropper',
props: {
uploadedImage: String,
},
data() {
return {
cropper: {},
updatedImage: {},
image: {},
initialImage: this.uploadedImage,
};
},
methods: {
crop() {
this.$emit('update-image', this.updatedImage);
},
cancel() {
this.$emit('cancel-upload');
},
},
mounted() {
this.image = this.$refs.image;
this.cropper = new Cropper(this.image, {
zoomable: false,
scalable: false,
aspectRatio: 1,
crop: () => {
const canvas = this.cropper.getCroppedCanvas();
this.updatedImage = canvas.toDataURL('image/png');
},
});
},
};
</script>
<style scoped>
.preview-image {
border-radius: 100px;
width:150px;
height:150px;
}
</style>
i have tried set initialImage and updatedImage with empty string but it's still not work. what should i initialized back after cancel or continue crop the image? or there is another way i could overcome this problem? i've also using vue watcher but it's still not work. hmm.