component rendering with latest data without reloading

app/controllers/api/templates_documents_controller.rb

@@ -32,7 +32,8 @@ module Api
       if page_number
         Templates::ProcessDocument.delete_picture(template, document, img_attachment_id, page_number)
         updated_images = updated_preview_images(document)
-        render json: { success: true, message: 'image deleted successfully', updated_preview_images: updated_images }
+        new_metadata = document.metadata
+        render json: { success: true, message: 'image deleted successfully', updated_preview_images: updated_images, updated_metadata: new_metadata }
       else
         page_number = "No image found for deletion"
         render json: { success: false, message: "Error: #{page_number}" }, status: :unprocessable_entity
@@ -46,7 +47,8 @@ module Api
       begin
         Templates::ProcessDocument.upload_new_blank_image(template, document)
         updated_images = updated_preview_images(document)
-        render json: { success: true, message: 'New blank image added successfully', updated_preview_images: updated_images }
+        new_metadata = document.metadata
+        render json: { success: true, message: 'New blank image added successfully', updated_preview_images: updated_images, updated_metadata: new_metadata }
       rescue StandardError => e
         render json: { success: false, message: "Error adding new blank image: #{e.message}" }, status: :unprocessable_entity
       end

app/javascript/template_builder/builder.vue

@@ -746,7 +746,7 @@ export default {
       const document = this.template.documents.find((e) => e.uuid === item.attachment_uuid)
       if (Array.isArray(document.preview_images)) {
         const indexToRemove = document.preview_images.findIndex((previewImage) => previewImage.id === imageId)
-        console.log(indexToRemove)
+        // console.log(indexToRemove)
         if (indexToRemove !== -1) {
           const confirmed = window.confirm('Are you sure you want to delete this image?')
           if (confirmed) {
@@ -772,7 +772,7 @@ export default {
               .then((data) => {
                 console.log('Success:', data)
                 document.preview_images = data.updated_preview_images
-                window.location.reload()
+                document.metadata = data.updated_metadata
               })
               .catch((error) => {
                 console.error('Error:', error)
@@ -805,9 +805,8 @@ export default {
           })
           .then((data) => {
             console.log('Success: ---', data)
-            this.template.documents.find((e) => e.uuid === item.attachment_uuid).preview_images = data.updated_preview_images
-            documentRef.$emit('imageRemoved', data.updated_preview_images)
-            window.location.reload()
+            documentRef.document.preview_images = data.updated_preview_images
+            documentRef.document.metadata = data.updated_metadata
           })
           .catch((error) => {
             console.error('Error: ---', error)