Dont use <form>

src/views/ReferenceID.vue

@@ -19,17 +19,19 @@ function fetchData() {
   contactData.value = null
   fetch(`${import.meta.env.VITE_EO_SERVICES_URL}/unified-data-gateway?referenceId=${ referenceId.value }`, {
       credentials: "include" // fetch won't send cookies unless you set credentials
-    }).then (async response => {
+    }).then (response => {
-      const data = await response.json();
-
       // check for error response
       if (!response.ok) {
         // get error message from body or default to response statusText
         const error = data  || response.statusText;
         return Promise.reject(error);
       }
-    contactData.value = await data;
+      response.json().then((data) => {
-    }).catch(error => {
+        contactData.value = data;
+      }); 
+    })
+    .catch(error => {
+      console.log(error)
       errorMessage.value = error;
     });
 }
@@ -39,11 +41,9 @@ function fetchData() {
   <div id="app">
     <h2>Search Criteria</h2>
     <div>
-      <form>
+      <label for="referenceId">Reference ID: </label>
-        <label for="referenceId">Reference ID: </label>
+      <input id="referenceId" :value="referenceId" @input="onInput" placeholder="enter Reference ID here" />
-        <input id="referenceId" :value="referenceId" @input="onInput" placeholder="enter Reference ID here" />
+      <button @click="fetchData">Search Contacts</button>
-        <button @click="fetchData">Search Contacts</button>
-      </form>
     </div>
 
     <h2>Results</h2>