How to removing an event listener inside of a directive

Hi,
I am using this jsfiddle tutorial to setup a click outside.
https://jsfiddle.net/Linusborg/Lx49LaL8/
It works great, however I am not destroying the element. ( I am hiding it.) The problem is, if I don’t destroy the element the it wont unbind the eventlistener and it won’t stop hiding. Is there a simple way to destroy the eventlistener inside of a directive?

I did a quick google search and @LinusBorg had an answer (i believe for what you are asking about) on another website here: https://stackoverflow.com/questions/44197334/are-listeners-removed-when-directive-is-destroyed

essentially you just use the good old ‘unbind’ method.

Hi!
So I did some more testing and realize I was wrong. I put a console.log inside the directives bind and unbind to see if/when they were getting called. In my parent component when I click on the show button it pulls up this component and the bind is called (works great). Then when I click outside of the div it hides the component and the unbind is called. This all works great.
However, when I try to click on the show button a second time it it calls the bind and unbind at the same time. So it is trying to show the component and hide it at the same time.

So you’re good?

Hmm no I am still struggling to understand what is going wrong. It binds and unbinds instantly on the second click so I can’t figure out how to test what is going wrong.

It’d be best if you provided code of your implementation. Without that, it’s a stab in the dark. It could be an event propagation issue.

Hi,
Ok I have tried to simplify it. Here is the issue I am having as I can see

        methods: {
            mount() {
                document.addEventListener("click", this.onClickOutside);
                console.log('mounted');
            },

            unmount() {
                document.removeEventListener('click', this.onClickOutside);
                console.log('unmounted');
            },

            onClickOutside(event) {
                let collabsibles =  this.$refs.myDiv;
                if (!collabsibles || collabsibles.contains(event.target)) return;
                console.log('clickedoutside');
                this.unmount();
                this.$emit('close', false)
            },
}

When I run the first method it loads the eventlistener correctly. However when I try to run the unmount, it doesn’t actually remove it even though it does console log. If I inspect the page with chrome tools I can still see the click event listener.