Vue.js 销毁指令中的Vue removeListener

我得到了一个用于在DOM中设置元素动画的指令，该指令如下所示：

Vue.directive('animate', {
    bind(el, binding) {
        let start = (binding.value)?binding.value.start:{y: 50, autoAlpha: 0};
        TweenMax.set(el, start);
    },
    inserted: function(el, binding) {
        let end = (binding.value)?binding.value.end:{y: 0, autoAlpha: 1};
        end.ease = Quart.easeOut;
        end.onComplete = () => {
            el.removeAttribute("style");
            el.classList.add("animation-done");
        };

        const f = function() {
            console.log("scrolling");
            if (InViewPort(el)) {
                window.removeEventListener('scroll', f);
                TweenMax.to(el, 1.5, end);
            }
        };

        window.addEventListener('scroll', f);
        f();
    }
});

该指令在组件中的调用方式如下：

v-animate="{start: {y: 50, autoAlpha: 0}, end: {y: 0, autoAlpha: 1, delay: index * 0.5}}"

这给了我想要的灵活性，只有一个问题。事件侦听器位于插入的

范围内，在
解除绑定挂钩上不可用

也许指令不是Vue中的方法，有人对如何处理这个问题有什么建议吗？
将它创建为
el
的属性。谢谢，伙计，我应该教你：-）