vue.jsでパララックスを作成したい

Question

vue.js勉強中で、パララックスを作成したいのです。
1個のときは真偽値の値(fadeActive)でクラスをつけるかどうか分岐させることができましたが、複数要素がある時はその方法が使えないためどのように対応すればいいか分かりません。
ご回答よろしくおねがいします。

<div class="box fadeUpTrigger" v-scroll="handleScroll" v-bind:class="{ fadeUp: fadeActive}">要素01</div>
<div class="box fadeUpTrigger" v-scroll="handleScroll" v-bind:class="{ fadeUp: fadeActive}">要素02</div>
<div class="box fadeUpTrigger" v-scroll="handleScroll" v-bind:class="{ fadeUp: fadeActive}">要素03</div>

Vue.directive("scroll",{
  inserted:function(el,binding){
    let f = function(evt){
      binding.value(evt,el);
      // if(binding.value(evt,el)){
      //   window.removeEventListener("scroll",f);
      // }
    }
    window.addEventListener("load",f);
    window.addEventListener("scroll",f);
  }
});

var vm = new Vue({
    el:"#app",
    data:{
      fadeActive:false
    },
    methods: {
        handleScroll: function (evt, el) {
          if (window.scrollY > el.offsetTop - 50) {
            this.fadeActive = true;
          }
        }
      },
      created(){
        // window.addEventListener("load", this.handleScroll("",""));
      }
});

Answer 1

コンポーネント化することで解決しました。