Vue.jsでスクロールアニメーションとクリック機能を実装するため

"dependencies": {
    "firebase": "^10.8.0",
    "nuxt": "^3.10.3",
    "vue": "^3.4.19",
    "vue-router": "^4.3.0"
  }

at _sfc_main.setup (C:\Users\\test-nuxt\app.js:74:23)
at callWithErrorHandling (C:\Users\\test-nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:192:19)
at setupStatefulComponent (C:\Users\\test-nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7562:25)
at setupComponent (C:\Users\\test-nuxt\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7523:36)
at renderComponentVNode (C:\Users\\test-nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:620:15)
at Module.ssrRenderComponent (C:\Users\\test-nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:84:10)
at default (C:\Users\\test-nuxt\node_modules\nuxt\dist\app\components\nuxt-root.js:82:37)
at Module.ssrRenderSuspense (C:\Users\\test-nuxt\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:467:5)
at _sfc_ssrRender (C:\Users\\test-nuxt\node_modules\nuxt\dist\app\components\nuxt-root.js:73:25)

function Scroll() {
  let time = 0.4; //時間
  let value = time;
  $(".delayScroll").each(function () {
    let parent = this; //親要素
    let elemPos = $(this).offset().top; //要素の位置
    let scroll = $(window).scrollTop(); //スクロール
    let windowHeight = $(window).height(); // 画面の高さ
    let childs = $(this).children(); //子要素

    //｛｝はスクロールをしたら動くまたは親要素にクラスplayがない
    if (scroll >= elemPos - windowHeight && !$(parent).hasClass("play")) {
      $(childs).each(function () {
        if (!$(this).hasClass("fadeUp")) {
          //動くのチェック

          $(parent).addClass("play");
          $(this).css("animation-delay", value + "s"); //アニメーションの遅延
          $(this).addClass("fadeUp"); //アニメにクラス名を追加
          value = value + time; // 遅延時間を増やす

          let index = $(childs).index(this);
          if (childs.length - 1 == index) {
            $(parent).removeClass("play");
          }
        }
      });
    } else {
      $(childs).removeClass("fadeUp"); //クラス名を削除
      value = time; //delay初期値の数値に戻す
    }
  });
}
//画面をスクロールしたら動かしたい
$(window).scroll(function () {
  Scroll(); //アニメーション用の関数を呼ぶ
}); //ここまで画面をスクロールをしたら動かしたい
//画面が読み込まれたらすぐに動かしたい
$(window).on("load", function () {
  Scroll(); //アニメーション用の関数を呼ぶ
}); //ここまで画面をスクロールをしたらすぐに動かしたい

$(function () {
  // #で始まるリンクをクリックした場合
  $('a[href^="#"]').click(function () {
    // スクロールの速度
    let speed = 500;
    // スクロールタイプ
    let type = "swing";
    // href属性の取得
    let href = $(this).attr("href");
    // 移動先の取得（hrefが#indexならトップ$(html)に、）
    let target = $(href == "#index" ? "html" : href);
    // 移動先のポジション取得
    let position = target.offset().top;
    // animateでスムーススクロール
    $("body,html").animate({ scrollTop: position }, speed, type);
    return false;
  });
});

// let links = document.querySelectorAll(".links");

//display links onclick on hamburger
// hamburger.addEventListener("click", () => {
//   navLinks.classList.toggle("hide");
//   hamburger.classList.toggle("lines-rotate");
// });

// for (let i = 0; i < links.length; i++) {
//   links[i].addEventListener("click", () => {
//     navLinks.classList.toggle("hide");
//   });
// }

<script setup>
import {onMounted} from 'vue';
new Vue({
  el: "#app",
  data: {
    time: 0.4,
    value: 0.4,
  },

  const :scrollAnimetion = () => {
      const parent = document.querySelector(".delayScroll");
      const elePos = parent.offsetTop;
      const scroll = window.scrollY;
      const windowHeight = window.innerHeight;
      const childs = parent.children;

      if (
        scroll > elePos - windowHeight &&
        !parent.classList.contains("play")
      ) {
        Array.from(childs).forEach((child) => {
          if (!child.classList.contains("fadeUp")) {
            parent.classList.add("play");
            child.style.animationDelay = this.value + "s";
            child.classList.add("fadeUp");
            value.value += time.value;

            const index = Array.from(childs).indexOf(child);
            if (childs.length - 1 === index) {
              parent.classList.remove("play");
            }
          }
        });
      } else {
        Array.from(childs).forEach((child) => {
          child.classList.remove("fadeUp");
        });
        value.value = time.value;
      }
    },
    const :scrollTarget = (target) => {
      const speed = 500;
      const type = "swing";
      const position = target === "#index" ? 0 : document.querySelector(target).offsetTop;
      $("body,html").animate({ scrollTop: position }, speed, type);
    },

  const :time = ref(0.4),
  const :value = ref(0.4),

  // onMounted(() => {
  //   scrollAnimetion();
  //   window.addEventListener("scroll", scrollAnimetion),

});
</script>