refactor: emit ref value instead of static boolean

Author: patrickcate

src/components/UsaNavPrimary/UsaNavPrimary.vue

@@ -63,6 +63,7 @@ onClickOutside(nav, closeAllItems)
       <template v-for="item in items">
         <UsaNavDropdown
           v-if="item?.children?.length"
+          :id="item?.id"
           :key="item?.id || item.text"
         >
           <UsaNavDropdownButton

src/composables/useMobileMenu.js

@@ -11,7 +11,7 @@ export function useMobileMenu(emit) {
     isMobileMenuOpen.value = false
 
     if (emit) {
-      emit('mobileMenuOpen', false)
+      emit('mobileMenuOpen', isMobileMenuOpen.value)
     }
 
     document.body.classList.remove(mobileMenuOpenClass)
@@ -24,7 +24,7 @@ export function useMobileMenu(emit) {
     isMobileMenuOpen.value = true
 
     if (emit) {
-      emit('mobileMenuOpen', true)
+      emit('mobileMenuOpen', isMobileMenuOpen.value)
     }
 
     document.body.classList.add(mobileMenuOpenClass)

src/composables/useToggle.js

@@ -9,10 +9,18 @@ export function useToggle(_id, idPrefix = '', defaultOpen = false, emit) {
 
   const closeContent = () => {
     isOpen.value = false
+
+    if (emit) {
+      emit('update:open', isOpen.value)
+    }
   }
 
   const openContent = () => {
     isOpen.value = true
+
+    if (emit) {
+      emit('update:open', isOpen.value)
+    }
   }
 
   const toggleContent = () => {
@@ -23,12 +31,6 @@ export function useToggle(_id, idPrefix = '', defaultOpen = false, emit) {
     }
   }
 
-  watch(isOpen, newValue => {
-    if (emit) {
-      emit('update:open', newValue)
-    }
-  })
-
   watch(propValue, newValue => {
     if (propValue.value !== newValue) {
       toggleContent()