How to write fullpage code in vue.js adding css classes?

Question

Frontend

fullpage plugin for vue, there is the same one for jquery and I transfer part of the self-written code to vue.

jquery
...
        onLeave: function(index, nextIndex, direction){
          if(direction == "up"){
            $(".section").removeClass("down next prev")
            $(".main-deerpfarm .section:nth-child("+nextIndex+")").addClass("up")
            $(".main-deerpfarm .section:nth-child("+nextIndex+")").next().addClass("next up")
            $(".main-deerpfarm .section:nth-child("+nextIndex+")").prev().addClass("prev up")
          }else{
            $(".section").removeClass("up next prev")
            $(".main-deerpfarm .section:nth-child("+nextIndex+")").addClass("down animate-show")
            $(".main-deerpfarm .section:nth-child("+nextIndex+")").next().addClass("next down")
            $(".main-deerpfarm .section:nth-child("+nextIndex+")").prev().addClass("prev down")
          }
...

Essentially, I need to change classes when scrolling with the mouse wheel (the plugin determines the block index and scroll direction) How to write for vue what the code above does?

VUE.js
...
        onLeave: function(index, nextIndex, direction){
          if(direction == 'up') {
         // ???????
          } else {
         // ???????
}

codepen https://codepen.io/serg-style/pen/wRYYLL?editors=1111

Answer 1

data(){
  return {
    classDir: '',
  }
}
onLeave(i, ni, dir){
  this.classDir = dir;
}
<div :class="{up: classDir}">

Answer 2

Don't try to manipulate the DOM directly, but change the component's data!
Forget about this jQuery-style at last!!!