function createObserver(handleIntersect, el, $options = {}) {
    const options = {
        root: null,
        threshold: 0.2,
        ...$options,
    };
    const observer = new IntersectionObserver(handleIntersect, options);

    observer.observe(el); // target element to watch
}

export default {
    inserted(el, binding) {
        let ran = 0;
        let wasVisible = 0;
        const [callback, options] = binding.value;
        if ((window.IntersectionObserver || typeof IntersectionObserver === 'function') && el) {
            createObserver(handleIntersect, el, options);
        } else handleIntersect([{ isIntersecting: true }], null);
        function handleIntersect([element], observer) {
            if (binding.modifiers.once && (ran > 1 || wasVisible > 0)) {
                if (observer) observer.unobserve(el);
                return;
            }
            callback(element.isIntersecting);
            wasVisible++;
            ran++;
        }
    },
};
// usage
<div v-visible.once="[value => isVisible = value]"></div>

//once will only run the directive one time