Ошибка типа: this. $ Refs.cropper.getCroppedCanvas не является функцией

Question

Я хочу обрезать, повернуть фотографию из URL изображения.Я конвертировал изображение из URL в строку base64.Изображение показывается на компоненте.Но когда я пытаюсь обрезать изображение, получая TypeError: this. $ Refs.cropper.getCroppedCanvas не является функцией.Я установил его npm install --save vue-cropperjs из https://www.npmjs.com/package/vue-cropperjs.

Imported it to local component 

   <tamplate>
     <VueCropper ref="cropper" :src="imgSrc" alt="Source Image" :modal='true'>
 </VueCropper>
</template> 

import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
components: { VueCropper} 

setImage (path) {var that = this;

    function toDataURL(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
            var reader = new FileReader();
            reader.onloadend = function () {
                callback(reader.result);
            }
            reader.readAsDataURL(xhr.response);
        };
        xhr.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
    }

    toDataURL(path, function (dataUrl) {

        that.imgSrc = dataUrl;

    })


},
cropImage() {
    // get image data for post processing, e.g. upload or setting image src
    this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
},
rotate() {
    // guess what this does :)
    this.$refs.cropper.rotate(90);
},