Hey @dombavetta thank you for opening this issue contribution. this is actually something I've been contemplating for a while now.

I used the CClickOutside component internally to build the menu components and some pop over components. it works well however I found it in the case where I needed to expose a list of elements inside the element I would like to watch it would break because it function as a renderless component that required only one child.

Furthermore the CClickOutside component was quite verbose in the template markup for a very simple task. So I decided to instead use a directive to achieve the same result but also keep the markup concise.

Personally, I would like to actually get rid of the CClickOutside component in preference for the v-click-outside directive because of the advantages that it comes with. I like the idea of exposing it to the user. 👍🏽 I was initially unsure about whether users would need something like this but now it seems more likely.

Do you have any thoughts about whether or not to keep the CClickOutside component and use the directive instead?

I didn't realize you already had a directive in there. Since that already exists I don't see a need to support both variants. Personally I would always opt to use a directive over the component.

Here's a thought though.. I haven't looked into how the chakra webpack loader works, would it be able to resolve directive usage and auto import the directive? If not then I see a small benefit by maintaining the component variant as it could be auto imported. Even then I don't imagine either of these would be heavily used though so I'm not sure the cost/value of maintaining both is worth it.

To augment this thought, for the next version of Chakra UI Vue, we shall be exposing a useClickOutside hook to the user. We'll also register it as a global directive in the Vue application so users can enjoy this.