Creé un poco componible, que se supone que me ayudará a manejar modales y diapositivas.

Este es el componible :

 export function useSlideover() { const isOpen = ref(false); function toggle(){ isOpen.value = !isOpen.value; } function open(){ isOpen.value = true; } function close(){ isOpen.value = false; } return { isOpen, toggle, open, close} } export function useModal() { const isOpen = ref(false); function toggle(){ isOpen.value = !isOpen.value; } function open(){ isOpen.value = true; } function close(){ isOpen.value = false; } return { isOpen, toggle, open, close} }

Si lo uso en un componente como este :

 const {isOpen, open, close, toggle} = useSlideover(); ... open();

todo funciona bien Pero de vez en cuando, hay dos componentes que usan este componible al mismo tiempo, por ejemplo, hay un modal que abre un modal más pequeño.

Lo que sucede aquí es que si uso la función close() en el modal más pequeño, el modal principal también se cierra, ya que isOpen cambia a false para este componente.

Mi pregunta es: ¿Cómo puedo manejar el estado de cada modal individualmente?