How in bootstrap-vue convert FileReader to blob and upload to server?

Hello, In @vue/cli 4.1.1 app I use bootstrap-vue and b-form-file conponent for images uploading

https://bootstrap-vue.js.org/docs/components/form-file/#multiple-files

with definition :

                <b-form-file
                    id="upload_ad_image"
                    v-model="new_upload_ad_image"
                    :state="Boolean(new_upload_ad_image)"
                    placeholder="Choose a file or drop it here..."
                    drop-placeholder="Drop file here..."
                    accept="image/jpeg, image/png, image/gif"
                ></b-form-file>
                
                <div ref="uploaded_img_preview" id="uploaded_img_preview" class="m-2" >Uploaded image preview :</div>

I found snippet https://codepen.io/Tenderfeel/pen/rgqWXR and using it I show selected file on my form for preview. Next I need to upload it on the server. I have an expierence of uploading image as blog using code like :

                fetch(this.taskRow.imageFile.blob).then(function (response) {
                    if (response.ok) {
                        return response.blob().then(function (imageBlob) {
                            let imageUploadData = new FormData()
                            imageUploadData.append('id', self.taskRow.id)
                            imageUploadData.append('image', imageBlob)
                            imageUploadData.append('image_filename', self.taskRow.imageFile.name)

But I need to convert uploading image to blob. I use method when image is selected: But got error :

Error in callback for watcher "new_upload_ad_image": "InvalidStateError: Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs               

        watch: {
            new_upload_ad_image(val) {
                if (!val) return;
                if (this.previewImg) {
                    this.previewImg.remove();
                }
                const img = document.createElement("img");
                img.classList.add("obj");
                img.file = this.new_upload_ad_image;
                console.log('img.file::')
                console.log(img.file)

                this.previewImg = img;
                console.log('this.$refs.uploaded_img_preview::')
                console.log(this.$refs.uploaded_img_preview)

                console.log('img::')
                console.log(img)

                this.$refs.uploaded_img_preview.appendChild(img);

                const fileReader = new FileReader();
                fileReader.onload = (e) => {
                    this.previewImg.src = e.target.result;
                };
                fileReader.readAsDataURL(this.new_upload_ad_image);
                console.log('fileReader::')
                console.log(fileReader)

                let blobObj= fileReader.readAsDataURL(img.file) // RAISE ERROR :

                console.log('blobObj::')
                console.log(blobObj)

            }
        },

What I see in the console : https://imgur.com/a/2EZxq9C

How to get blob and upload it on server?

    "bootstrap-vue": "^2.3.0",
    "vue": "^2.6.11",

Thanks!