Directive `v-click-outside`

index.js

export default {
    directives: {
        /*
         * http://stackoverflow.com/questions/43693665/vuejs-editable-close-when-click-outside-in-vuejs
         * https://jsfiddle.net/Linusborg/Lx49LaL8/
         */
        'click-outside': {
            bind: function (el, binding, vNode) {
                // Provided expression must evaluate to a function.
                if (typeof binding.value !== 'function') {
                    const compName = vNode.context.name
                    let warn = `[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be`
                    if (compName) {
                        warn += ` Found in component '${compName}'`
                    }

                    console.warn(warn)
                }
                // Define Handler and cache it on the element
                const bubble = binding.modifiers.bubble
                const handler = (e) => {
                    if (bubble || (!el.contains(e.target) && el !== e.target)) {
                        binding.value(e)
                    }
                }
                el.__vueClickOutside__ = handler

                // add Event Listeners
                document.addEventListener('click', handler)
            },

            unbind: function (el, binding) {
                // Remove Event Listeners
                document.removeEventListener('click', el.__vueClickOutside__)
                el.__vueClickOutside__ = null

            }
        }
    }
}

This works well but when I try to work with it inside Bootsrap vue Modal It does not work. Can it be made to work inside bootstrap vue modal

This works well but when I try to work with it inside Bootsrap vue Modal It does not work. Can it be made to work inside bootstrap vue modal

I'm having the exact same problem, how could we fix this?

@mariobalca
Just change
if (bubble || (!el.contains(e.target) && el !== e.target)) {
to
if (bubble || -1 == e.path.indexOf(el)) {