I created a little composable, which is supposed to help me handling modals and slide overs.

This is the composable :

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}
}

If I use it in a component like this :

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

...

open();

everything works nice. But from time to time, there are two components using this composable at the very same time - e.g. there is a modal that opens a smaller modal.

What happens here is that if I use the close() function on the smaller modal, the parent-modal closes too, as isOpen changes to false for this component, too.

My question is: How can I handle the state of each modal individually ?