Nuxt.js Firebaseにデプロイをするとエラーが出現する

開発環境では，エラーが無かったのですが
Firebaseにデプロイをして，urlに入るとエラーになります．

該当する部分は，スクロールでふわっと浮かび上がるアニメーションなのですが，
TypeError: Cannot read property 'setAttribute' of undefined
at f.handleScroll (72a757509a673510469e.js:1)
のようなエラーが出ます

参考にしたサイトはこちら

コードは以下の通りです

vue
1
2<div id="box" v-scroll="handleScroll">
3hogehoge
4</div>
5
6<script>
7export default {
8  methods: {
9    handleScroll: function(evt, el) {
10      if (window.scrollY > 500) {
11        console.log("500");
12        el.setAttribute(
13          "style",
14          "opacity: 1; transform: translate3d(0, -10px, 0);"
15        );
16      }
17      return window.scrollY > 600;
18    },
19};
20</script>
21
22
23<style>
24#box {
25  opacity: 0;
26  backface-visibility: hidden;
27  transition: 1.5s all cubic-bezier(0.39, 0.575, 0.565, 1);
28}
29</style>

プラグインフォルダ下にscroll.jsを作りました

js
1import Vue from "vue";
2
3Vue.directive("scroll", {
4  inserted: function(el, binding) {
5    let f = function(evt) {
6      if (binding.value(evt, el)) {
7        window.removeEventListener("scroll", f);
8      }
9    };
10    window.addEventListener("scroll", f);
11  }
12});
13