Struggling to figure out "Click outside" directive

Hi,
I have created a fiddle here. When I was working locally the issue I was seeing is because it clicks twice, negating the value. Though I am not sure why it is clicking twice.

https://jsfiddle.net/nwkszxyc/2/

Hi

What is the fiddle supposed to do? Clicking on the body should hide the text?

I updated it here
https://jsfiddle.net/d04vms7y/
Clicking it should show the hidden box and then clicking anywhere outside the now visible box should close it.

Hi. I think maybe you should make a backdrop or something to cover the rest of the window. Otherwise will people get confused. If they click on any other part of the window will that click not do that they intend but hide the cart. However if you show a semitransparant div behind the cart which blur the rest of the window will people know what is going on.

I am mainly trying to figure out why the directive click outside isn’t working.
If you look at “Show Box Not working” div, if I click on that div it should run the method

@click.prevent="show('cart')"

that should make activeItem = cart and thus the div view cart should be shown. This isn’t working however because of the

v-clickoutside="show('cart')"

(if you remove that then it will show the div).
I am trying to understand why the v-clickoutside directive is causing it not to work. It isn’t even on the same div, or a child of the “Show Box Not working” div