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.

[pravkanth]

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

<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>

<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.

[Norserium]

@pravkanth, could you provide the codesandbox to reproduce this issue?