useOpenable: support for parent to be component

[tspears1]

when the parent is a component and not an html element, the event listeners throw errors since el.value is no longer valid. this adds an argument to check the $el inside of the el.value if true.

[khamer]

I'm hesitant to merge this because $el won't necessarily be a DOM element for components - Vue 3 they can be text nodes, multiple nodes, etc. So I'd either want to update the code to make it work with all of those (but I'm not sure we can) or be clear that this composable has to take a DOM element. Did you have a use case in mind?

That said, I'd be all for swapping out the .value calls for unref() and some of those best practices that I missed.

[tspears1]

@khamer yeah I ran into this using the Motion One library to run the transition on a new dropdown:

<Presence>
            <Motion
                v-show="isOpen"
                :id="id"
                ref="dropdown"
                class="navDropdown__content"
                :initial="closedMotion"
                :animate="openedMotion"
                :exit="closedMotion"
            >
                <slot />
            </Motion>
</Presence>

I totally see what you're saying. the .$el worked for this solution but I get why it wouldn't for others. I guess more than anything I wanted to flag it so we could investigate.