vue.js - Vuejs ディレクティブ内の gsap.scrollTrigger の更新がトリガーされない

Question

滑らかなスクロールには機関車を、アニメーションには gsap を使用しています。ここで、タイプミスをアニメーション化するディレクティブを作成したいと考えました。

私のアプリケーションには、スムーズ スクローラーを作成し、それを gsap と結合するためのこのコードが含まれています ( https://codepen.io/GreenSock/pen/zYrELYeからコピー)

    const scroller = new this.$locomotiveScroll({
      el: document.querySelector('.js_smoothscroller'),
      smooth: true
    });   

    scroller.on('scroll', () => {
      this.$ScrollTrigger.update()
    })

    this.$ScrollTrigger.scrollerProxy('.js_smoothscroller', {
        scrollTop(value) {
          return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y
        },
        getBoundingClientRect() {
          return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight
          }
        },
        
      }
    )

このコードは正常に動作します

ここで、いくつかの種類のアニメーションを簡単に再利用するためのディレクティブを作成したいと考えています。

function animateLetters() {
  console.log('inviewport')
}
const init = {
  bind: (el, binding, vnode) => {

    ...
   
    vnode.context.$ScrollTrigger.create({
      trigger: '.heading',
      scroller: ".js_smoothscroller",
      onEnter: () => { console.log('inviewport') }
      onUpdate: () => { console.log('doesn't get updated')},
      start: "top bottom",
      end: "top top"
    })
  }
}

Vue.directive('char-animation', init)

ディレクティブはロード時に 1 回実行されますが、onUpdate または onEnter 関数を起動することはありません。

ウィンドウのサイズを変更すると、 onUpdate 関数が起動されますが、スクロールでは発生しません。

小さなデモの 追加を更新https://codesandbox.io/s/gsap-scrolltrigger-ihfbg?file=/directives/char-animation.js

私は何が欠けていますか？