In Vue advanced cropper , the moving class (vue-rectangle-stencil–moving) is not removing automatically when I stop moving the mouse

In Vue advanced cropper , the moving class (vue-rectangle-stencil–moving) is not removing automatically when I stop moving the mouse, but if I refresh the page once means , it is removing automatically and working as expected.

I am using vue 2, vue advanced cropper version 1.11.6, there is no error message in console.

Image

My code:

    <template>
        <div>
        <b-sidebar  id="car-all-details" title="Sidebar with backdrop" backdrop right no-header prop no-close-on-esc no-close-on-backdrop>
            <div class="cropper_container d-flex w-100 mt-5">
                <div class="ml-3 w-50">
                    <cropper
                        ref="cropper"
                        class="upload-example-cropper cropper"
                        :src="image"
                        @change="cropperChangedNew"
                        :maxWidth="sizeRestriction.maxWidth"
                        :minWidth="sizeRestriction.minWidth"
                        :maxHeight="sizeRestriction.maxHeight"
                        :minHeight="sizeRestriction.minHeight"
             />
                </div>
           </div>
        </b-sidebar>
    </div>
    
</template>

<script>
import Vue from "vue";
import { Cropper } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css';
Vue.use(Cropper);
export default {
    data(){
        return {
            croppedFinalImg : ''
        }
    },
    props: ["image", "sizeRestriction"],
    components: {
         Cropper
    },
    methods:{
        cropperChangedNew({ canvas }) {
            this.croppedFinalImg = canvas.toDataURL()
        },
    },
    mounted(){
        this.$refs.cropper.refresh()
        this.$root.$emit('bv::toggle::collapse', 'car-all-details')
    },
}
</script>

I tried to remove the class manually both by code and removing in dev tools , even removing the class, it is not working.