How to update a variable in vue.js?

Question

Vue.js

I wrote an addition in js, everything works until you go through the pages and go back, because pages do not reload, then the variables have already changed their value and the page ceases to function, I need to return them to their original value during transitions. How to do it?

<script>
  var screenOne = 0, cssparal,checkMove=false,heightSvg;
  window.onload = function() {
    if(document.querySelector('.fp-enabled')) {
      heightSvg = document.body.clientHeight
      if(!isTouchDevice) {
        var mouseCoords = {
          //    x: 0,
          y: 0,
          set: function (e) {
            if (e.pageX && e.pageY) {
              //        this.x = (e.pageX * -1 / 42).toFixed(2);
              this.y = (e.pageY * -1 / 26).toFixed(2);
            } else if (e.clientX && e.clientY) {
              //        this.x = e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
              this.y = e.clientY+(document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
            } else {
              //        this.x = 0;
              this.y = 0;
            }
          }
        }
        document.onmousemove = function (e) {
          e = e || window.event;
          mouseCoords.set(e);
          cssparal = 'background-position: 0px ' + mouseCoords.y + 'px'
          document.querySelector('.section.active').style.cssText += cssparal
        }
      }
      window.addEventListener("wheel", function(e) {
        if (e.deltaY < 0) {
          // код, при прокрутке вверх
          if(screenOne == 2 || screenOne == 0)
            firstScreen()
        }
        else if(e.deltaY > 0) {
          if(screenOne == 0) {
            firstDown()
          }
          else if(screenOne == 2){
            secondDown()
          }
          // код, при прокрутке вниз
        }
      });
    }
  }
  function firstDown() {
    var elFirstScreen = ['.label-deer', '.label-decarrow', '.label-deer_txt', '.heading-h_main', '.screen-1_txt']
    var mainPageMask = document.querySelector('.main_page-1_2')
    mainPageMask.style.cssText += 'display: block';
    setTimeout(function(){mainPageMask.classList.add('show-animate-1_2'); mainPageMask.style.cssText += 'visibility: visible'; document.querySelector('.svgmask').style.cssText += 'height: ' + heightSvg},200);
//    //.show("slide", { direction: "right" }, 600).addClass('show-animate-1_2'); если нужно снизу-вверх

    for (var i = 0; i < elFirstScreen.length; i++) {document.querySelector(elFirstScreen[i]).classList.remove("animated"); document.querySelector(elFirstScreen[i]).style.cssText = 'opacity: 0;transition: 0.6s'}
    setTimeout(function() { screenOne = 2 },400);
  }

  function firstScreen() {
    var elFirstScreen = ['.label-deer', '.label-decarrow', '.label-deer_txt', '.heading-h_main', '.screen-1_txt']
    var mainPageMask = document.querySelector('.main_page-1_2')
    mainPageMask.classList.remove('show-animate-1_2'); // .hide("slide", { direction: "right" }, 400);
    for (var i = 0; i < elFirstScreen.length; i++) {document.querySelector(elFirstScreen[i]).classList.remove("animated"); document.querySelector(elFirstScreen[i]).style.cssText = 'opacity: 1;transition: 1.2s'}
    screenOne = 0;
  }
  function secondDown() {
    screenOne = 3;
  }

  export default {
    watch: {
      $route() {
        var screenOne = 0, cssparal,checkMove=false,heightSvg;
      }
    },
  data() {
    return {
      options: {
        onLeave: this.onLeave,
        scrollingSpeed: 1200,
      }
    }
  },
      methods: {
        onLeave: function(index, nextIndex, direction){
          console.log(screenOne)
          var elements = document.getElementsByClassName("section")
          if(screenOne == 0){
            return false
          }

          if(direction == 'up') {
            for (var i = 0; i < elements.length; i++) {elements[i].classList.remove("down","next","prev")}

            var upDir = nextIndex.item; upDir.classList.add("up")

            if(nextIndex.index === 0) {} else {upDir.previousElementSibling.classList.add("prev", "up")}
            upDir.nextElementSibling.classList.add("next", "up")

          } else {

            for (var i = 0; i < elements.length; i++) {elements[i].classList.remove("up","next","prev")}

            var downDir = nextIndex.item; downDir.classList.add("animate-show","down")

              downDir.previousElementSibling.classList.add("prev", "down")
            if(nextIndex.index+1 >= elements.length) {} else {downDir.nextElementSibling.classList.add("next", "down")}
          }

          var logoDeerpfarm = document.querySelector('.logo-deerpfarm'), logoProduct = "<span class='logo-deerpfarm_txt color-white'>продукция</span>"
          var jsPhoneblock = document.querySelector('.js-phone-block')

          if (nextIndex.index === 1 || nextIndex.index === 2 || nextIndex.index === 3) {
            logoDeerpfarm.classList.add('logo-deerpfarm-txt'); if(!document.querySelector('.logo-deerpfarm_txt')){logoDeerpfarm.innerHTML+=logoProduct};
           if(jsPhoneblock.classList.contains('fadeInDown')){jsPhoneblock.classList.remove('fadeInDown')}; jsPhoneblock.classList.add('animated','fadeOutUp')
            if(!isMobile){document.querySelector('.desc-deerpfarm').classList.add('animated','fadeOut')}
          }
          else {
            logoDeerpfarm.classList.remove('logo-deerpfarm-txt')
            if(document.querySelector('.logo-deerpfarm_txt')){document.querySelector('.logo-deerpfarm_txt').remove()}

            if(jsPhoneblock.classList.contains('fadeOutUp')){
              jsPhoneblock.classList.remove('fadeOutUp'); jsPhoneblock.classList.add('fadeInDown')
            }
            if(!isMobile && document.querySelector('.desc-deerpfarm').classList.contains('fadeOut')){
              document.querySelector('.desc-deerpfarm').classList.remove('fadeOut')
            }
          }

           		if (nextIndex.index == 0) {
           			setTimeout(function() { screenOne = 0 },600);
           		}

          removeClassWild(logoDeerpfarm,"bg-*");
          switch (nextIndex.index + 1) {
            case 1: case 5: logoDeerpfarm.classList.add('bg-green');break;
            case 2: logoDeerpfarm.classList.add('bg-green-2');break;
            case 3: logoDeerpfarm.classList.add('bg-grey-2');break;
            case 4: logoDeerpfarm.classList.add('bg-grey-3');break;
            case 6: logoDeerpfarm.classList.add('bg-green');document.querySelector('.desc-deerpfarm').classList.remove('fadeOut');break;
          }

          function removeClassWild (el, m) {
            let re = new RegExp('\\b' + m.replace(/\*/g, '\\S+') + '', 'g');
            el.className = Array.from(el.classList).filter(cl => !re.test(cl)).join(' ');
            return el;
          }
      }
  }
}
</script>

Answer 1

Do you have all the logic in export default?
Those. in computed + methods sections?
If so, put your variables in the data section
There you will always have access to them
Or else you can use Vuex