上传图片后如何裁剪图片

Question

我有一个vue应用程序，该应用程序具有图像上传器字段，可以通过使用vue-image-crop-uploader进行裁剪。

  import 'babel-polyfill'; // es6 shim
    import Vue from 'vue';
    import myUpload from 'vue-image-crop-upload/upload-1.vue';
 
    new Vue({
        el: '#app',
        data: {
            show: true,
            params: {
                token: '123456798',
                name: 'avatar'
            },
            headers: {
                smail: '*_~'
            },
            imgDataUrl: '' // the datebase64 url of created image
        },
        components: {
            'my-upload': myUpload
        },
        methods: {
            toggleShow() {
                this.show = !this.show;
            }
        },
        events: {
            /**
             * crop success
             *
             * [param] imgDataUrl
             * [param] field
             */
            cropSuccess(imgDataUrl, field){
                console.log('-------- crop success --------');
                this.imgDataUrl = imgDataUrl;
            },
            /**
             * upload success
             *
             * [param] jsonData   server api return data, already json encode
             * [param] field
             */
            cropUploadSuccess(jsonData, field){
                console.log('-------- upload success --------');
                console.log(jsonData);
                console.log('field: ' + field);
            },
            /**
             * upload fail
             *
             * [param] status    server api return error status, like 500
             * [param] field
             */
            cropUploadFail(status, field){
                console.log('-------- upload fail --------');
                console.log(status);
                console.log('field: ' + field);
            }
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <a class="btn" @click="toggleShow">set avatar</a>
    <my-upload field="img"
        :width="300"
        :height="300"
        url="/upload"
        :params="params"
        :headers="headers"
        lang-type="en"
        :value.sync="show"
        img-format="png"></my-upload>
    <img :src="imgDataUrl">
</div>

但是当我运行时，会显示此错误：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the 

parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

found in

---> <MyUpload>
       <ACol>
         <ARow>
           <AForm>
             <CreateEmployee> at src/views/employee/CreateEmployee.vue
               <Anonymous>
                 <Anonymous>
                   <Anonymous>
                     <Anonymous>
                       <Anonymous>
                         <AModal>
                           <Employee> at src/views/employee/Employee.vue
                             <Anonymous>
                               <ALayoutContent>
                                 <Anonymous>
                                   <ALayout>
                                     <Anonymous>
                                       <ALayout>
                                         <BasicLayout> at src/layouts/BasicLayout.vue
                                           <App> at src/App.vue
                                             <Root>

还有：

[Vue warn]: Failed to resolve directive: el

(found in <MyUpload>)

我试图弄清楚，什么也没发现。究竟是什么原因导致此错误？代码中没有使用props和el这样的东西。是应该在库中更改的内容，还是应该添加到代码中的内容？