Using replace() returns [Obj Obj]

[Germs31]

HI! Im having an issue when using the replace method. once the replace method is called my src on the img becomes an object when i am sending a string.

<img src="[object Object]" alt="image" style="max-width: 100%; width: 60%;" class="cropper-hidden">

This is my code

<template>
    <div class="img__cropper">
        <VueCropper
            ref="cropper"
            :viewMode="1"
            :checkCrossOrigin="false"
            :initialAspectRatio="1/1"
            :responsive="true"
            :img-style="{ width: '60%' }"
            :src="cropperImg"/>

        <div class="img__cropper__actions mt-3">
            <b-button class="tag__btn" variant="success" @click="getData">
                <b-icon icon="aspect-ratio"></b-icon>
                Tag
            </b-button>
        </div>
    </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
export default {
    components: { VueCropper },
    props: ["img"],
    data() {
        return {
            cropData: {},
            cropperImg: this.img
        }
    },
    watch: {
        img(newVal){
            this.cropperImg = this.$refs.cropper.replace(newVal)
        }
    },
    methods: {
        getData() {
            this.cropData = this.$refs.cropper.getData();
            this.$emit("croppedImgData", this.cropData)
        },

    }
}
</script>

Im not totally sure what im doing wrong.

[Germs31]

Issue was corrected. I should have established the new image and then called the replace function. it should look like this.

    watch: {
        img(newVal){
            this.cropperImg = newVal
            this.$refs.cropper.replace(newVal)
        }
    },