title: how to completely destroy a function on component closed?
body: <p>I have a vue app form which has an image uploader in it. It has child component where carry the function to crop the image after upload the image from ant-design upload. it's working correctly for upload and crop process. The problem is where it's only work when user firstime upload the image. But in second time upload the image, the crop canvas still using the first image that need to crop. So i destroy the function on it's close or saved by using <code>this.cropper.destroy()</code> it's somehow work a little but still have the bug where second time upload will using first image, third time upload will using second image, fourth time upload will using third image and so on. it'll have no user friendly if this bug still there.
  Here i'm show my child component code where i want it to be completely destroy on component destroy.</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
      &lt;a-row :gutter="16"&gt;
          &lt;a-col :span="12"&gt;
              &lt;img ref="image" :src="initialImage"&gt;
          &lt;/a-col&gt;
          &lt;a-col :span="12" align="center"&gt;
              &lt;p&gt;&lt;strong&gt;Preview&lt;/strong&gt;&lt;/p&gt;
              &lt;img :src="updatedImage" class="preview-image"&gt;
          &lt;/a-col&gt;
      &lt;/a-row&gt;
      &lt;br /&gt;
      &lt;a-row :gutter="16"&gt;
          &lt;a-button type="primary" style="float: right;" @click="crop"&gt;Crop&lt;/a-button&gt;
          &lt;a-button style="float: right; margin-right: 5px;" @click="cancel"&gt;Cancel&lt;/a-button&gt;
      &lt;/a-row&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  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);
        this.cropper.destroy();
      },
      cancel() {
        this.$emit('cancel-upload');
        this.cropper.destroy();
      },
      cropImage() {
        this.image = this.$refs.image;
        this.cropper = new Cropper(this.image, {
          zoomable: false,
          scalable: false,
          aspectRatio: 1,
          crop: () =&gt; {
            const canvas = this.cropper.getCroppedCanvas();
            this.updatedImage = canvas.toDataURL('image/png');
          },
        });
      },
    },
    watch: {
      uploadedImage() {
        this.initialImage = this.uploadedImage;
        this.cropImage();
      },
    },
    mounted() {
      this.cropImage();
    },
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
    .preview-image {
      border-radius:100px;
      width:150px;
      height:150px;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>What is actually i need to do for this <code>this.cropper</code> completely destroy on page close? Or anything that I can do to overcome this problem?</p>