I have a vue app that is a mail client. Currently, I'm writing the code to view email attachments -

Below is a snippet from the template and the js

Relevant Template code

<div class="modal-body text-center">
<object style="width:100%; min-height:750px;" id="attachment-preview" v-bind:data="inbox.attachment_data" v-bind:type="inbox.attachment_type"></object>
</div>

Relevant js code

 let b64 = rsp.data; //rsp.data is a base64 encoded string - working properly because the first attachment loaded is fine and others work after issuing a command
 if (attachment.filename.includes('.pdf')) {
    app.inbox.attachment_data = `data:application/pdf;base64,` + b64;
    app.inbox.attachment_type = 'application/pdf';
 }
 else if (attachment.filename.includes('.txt')) {
    app.inbox.attachment_data = `data:text/plain;base64,` + b64;
    app.inbox.attachment_type = 'text/plain';
 }
 // you get the idea

On the first preview everything works fine the attachment is loaded into the preivew accordingly. However, when you attempt to preview the next attachment there is an issue. I see that the data and type attributes are getting set correctly, yet the content shown in the object tag is not updating until I do something like --

document.getElementById("attachment-preview").data = document.getElementById("attachment-preview").data

in the console.

Does anyone have any insight in how I can correct this or why this would be happening?

I feel like I could run this on a timer

document.getElementById("attachment-preview").data = document.getElementById("attachment-preview").data

but I would prefer to not have to do this.

EDIT Eventually, I just gave up and removed the old object and made a new one.

 let object = document.createElement("object");
// set object properties
//remove all children from attachment-preview-holder
while (document.getElementById("attachment-preview-holder").firstChild) {
       document.getElementById("attachment-preview-holder").removeChild(document.getElementById("attachment-preview-holder").firstChild);
 }
document.getElementById("attachment-preview-holder").appendChild(object);