I am running a frontend application via VueJS on my local machine that queries GraphQL. One of the queries is a download which works fine, however I think there is an issue with my javascript code. Everytime I click the download button it triggers the download function, i.e. @click="download". The download functions are as follows (the bottom one runs first):

sleep(ms) {
            return new Promise((resolve) => {
                setTimeout(resolve, ms);
            });
        
downloadFile() {
            const vm = this;
            vm.count ++;
            axios.post("http://0.0.0.0/graphql", {
            query:
            `mutation download_doc($object_path:String!) {
                download_doc(object_path:$object_path) {
                    file_name
                    encoded_file
                }
                }
            `, 
            variables : {
                object_path: this.object_path
            }
            })
            .then(response => vm.file_info = response.data.data.download_doc.encoded_file)
            .then(function() { console.log(vm.file_info);})
        },

downloadBase64File(base64Data, fileName) {
            const linkSource = `data:text/plain;base64,${base64Data}`;
            const downloadLink = document.createElement("a");
            downloadLink.href = linkSource;
            downloadLink.download = fileName;
            downloadLink.click();
        },

async download() {
            this.downloadFile();
            await this.sleep(1000);
            this.downloadBase64File(this.file_info, this.object_path);
            await this.sleep(1000);
            if (this.count >= 2) {
                this.clearForm()
            }

However, on the first click, I get a network error and it only downloads on the second click. Sometimes third click for particularly large files, with the second click also resulting in a failed network error.

I am relatively new to using javascript so not sure if the fix is easy. Does anyone know how to resolve this issue?