cveRecordSearchModule: change "cveId" to ref

Author: rlxdev

src/components/cveRecordSearchModule.vue

@@ -86,7 +86,7 @@ let queryString = ref('');
 
 let cveGenericGlobalsStore = useGenericGlobalsStore();
 let searchType = ref('');
-let cveId = '';
+let cveId = ref('');
 
 // this seems redundant, but it fixes an edge case. if a user searches for a
 // particular field, then on the results page flips the toggle, THEN refreshes
@@ -101,6 +101,7 @@ let searchTypeBoolean = computed(() => {
 
 if (!cveGenericGlobalsStore.isProductionWebsite)
   watch(searchType, () => {
+
     resetStates();
 
     if (searchType.value == legacyOptionLabel && route.query?.id) {
@@ -109,20 +110,24 @@ if (!cveGenericGlobalsStore.isProductionWebsite)
       // in the input field.  Because it's a valid CVEID, the search button
       // is enabled.
 
-      cveId = route.query.id;
+      cveId.value = route.query.id;
       cveListSearchStore.isSearchButtonDisabled = false;
     }
   });
 
-searchType.value = searchOptionLabel;
+searchType.value = cveGenericGlobalsStore.useSearch ? searchOptionLabel
+  : legacyOptionLabel;
 
 watch(
   () => route.query,
   () => {
-    if (searchTypeBoolean.value && route.query?.query) {
+    if (searchTypeBoolean.value) {
+      if (route.query?.query) {
           queryString.value = route.query.query.trim();
           validate();
-    }
+      }
+    } else if (route.query.id)
+      cveId.value = route.query.id;
   }
 )
 
@@ -133,7 +138,7 @@ function resetStates() {
   cveGenericGlobalsStore.setUseSearch(isSearch);
   cveGenericGlobalsStore.setCurrentServicesUrl(servicesUrl);
   cveListSearchStore.searchType = isSearch;
-  cveId = '';
+  cveId.value = '';
   queryString.value = cveListSearchStore.query = '';
   errorMessageStore.$reset();
   cveListSearchStore.isSearchButtonDisabled = true;
@@ -152,13 +157,13 @@ function startSearch() {
       } else
         cveListSearchStore.search();
   } else if (route.name !== 'CVERecord' || !route.query?.id
-             || (route.query.id !== cveId)) {
+             || (route.query.id !== cveId.value)) {
 
     // This is for the legacy find and is only applicable on the non-production
     // websites.  This push to the router will trigger a lookup for the CVE
     // record.
 
-    router.push({name: cveRecordRouteName, query: {id: cveId}});
+    router.push({name: cveRecordRouteName, query: {id: cveId.value}});
   } else {
 
     // Non-production website in legacy find, with the user possibly wanting
@@ -173,7 +178,7 @@ function startSearch() {
 function validateQueryString() {
 
   const isSearch = searchTypeBoolean.value;
-  const searchValue = isSearch ? queryString.value : cveId;
+  const searchValue = isSearch ? queryString.value : cveId.value;
 
   cveListSearchStore.isSearchButtonDisabled = true;
   errorMessageStore.$reset();
@@ -197,7 +202,7 @@ function validateQueryString() {
       if (isSearch)
         queryString.value = normalizedCveId;
       else
-        cveId = normalizedCveId;
+        cveId.value = normalizedCveId;
     } else {
       errorMessageStore.setErrorMessage(`Invalid CVE ID "${normalizedCveId}" - identifier out of range`);
     }
@@ -252,7 +257,7 @@ function onInputChange() {
   // the validity of the search string when initiated.
 
     const isSearch = searchTypeBoolean.value;
-    const searchValue = isSearch ? queryString.value : cveId;
+    const searchValue = isSearch ? queryString.value : cveId.value;
 
   if (!searchValue.length) {
     // This handles the case when the user clears the input field, by using the