title: Create an instance of a composable
body: <p>I created a little composable, which is supposed to help me handling modals and slide overs.</p>
  <p>This is the composable <strong>:</strong></p>
  <pre class="lang-js prettyprint-override"><code>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}
  }
  </code></pre>
  <p>If I use it in a component like this <strong>:</strong></p>
  <pre><code>const {isOpen, open, close, toggle} = useSlideover();
  
  ...
  
  open();
  </code></pre>
  <p>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.</p>
  <p>What happens here is that if I use the <code>close()</code> function on the smaller modal, the parent-modal closes too, as <code>isOpen</code> changes to <code>false</code> for this component, too.</p>
  <p>My question is: How can I handle the state of each modal individually ?</p>