Javascript – How to avoid redirect in Vue 3 composition API using ajax

So to anyone who might be facing the same problem I was facing regarding my page redirecting to a JSON response after submitting a form, Here's what I did

import { ref, onMounted, nextTick } from 'vue'

onMounted(() => {
  nextTick(() => {
    form.value.addEventListener('submit', handleFormSubmit)
  })
})

function handleFormSubmit(event) {
  event.preventDefault()
  const formData = getFormData(form.value)
  const data = formData.data

  // If a honeypot field is filled, assume it was done so by a spam bot.
  if (formData.honeypot) {
    return false
  }

  disableAllButtons(form.value)
  const url =
    'https://script.google.com/macros/s/AKfycbzuG3ea4BPkC27joSKGPmDTxtNqvP5cyXiNjeC_IRfpLhsyxmM7DMbxLvtUmfPxWmJw_A/exec'

  const xhr = new XMLHttpRequest()
  xhr.open('POST', url)
  xhr.setRequestHeader('content-Type', 'application/x-www-form-urlencoded')
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      form.value.reset()
      const formElements = form.value.querySelector('.form__elements')
      if (formElements) {
        formElements.style.display = 'none' //hide form
      }

      const thankYouMessage = form.value.querySelector('.thankyou_message')
      if (thankYouMessage) {
        thankYouMessage.style.display = 'block'
      }
      sending.value = false
      showSuccessModal.value = true // show success modal
      window.location.reload()
    }
  }

  //url encode form data before sending as post data
  const encoded = Object.keys(data)
    .map(function (k) {
      return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
    })
    .join('&')
  xhr.send(encoded)
}

function getFormData(form) {
  const elements = form.elements
  const data = {}

  for (let i = 0; i < elements.length; i++) {
    let element = elements[i]
    let name = element.name
    let value = element.value

    if (name) {
      data[name] = value
    }
  }

  return { data: data }
}

function disableAllButtons(form) {
  const buttons = form.querySelectorAll('button')
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].disabled = true
  }
}

So after the submit button is clicked and the form is sent, a modal pops up to confirm it has been submitted and also the page reloads. The reason for reloading the page is, after submitting the form, it is disabled until a reload happens again.