i added some locale javascript files to my nuxt app but after changing page the javascriptp file are not working of course because they couldn’t catch necceserry DOM elements , in this case what should i do how can i trigger again this js file ?

Case:

• Open index page / -> successfully loaded
• Go /about
• Go again to / and javascript not working

Sidenot:This is the theme integration process , i know this is not right using javascriptp with Nuxt.

my package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxt/scripts": "^0.6.4",
    "nuxt": "^3.12.3",
    "vue": "latest"
  },
  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}

my nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  css: ["~/assets/css/style.css"],

  app: {
    head: {
      link: [
        {
          rel: "stylesheet",
          href: "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700",
        },
        {
          rel: "stylesheet",
          href: "lib/bootstrap/css/bootstrap.min.css",
        },
        {
          rel: "stylesheet",
          href: "lib/font-awesome/css/font-awesome.min.css",
        },
        {
          rel: "stylesheet",
          href: "lib/animate/animate.min.css",
        },
        {
          rel: "stylesheet",
          href: "lib/ionicons/css/ionicons.min.css",
        },
        {
          rel: "stylesheet",
          href: "lib/owlcarousel/assets/owl.carousel.min.css",
        },
      ],
      script: [
        { src: "/lib/jquery/jquery.min.js", defer: true },
        { src: "/lib/jquery/jquery-migrate.min.js", defer: true },
        { src: "/lib/popper/popper.min.js", defer: true },
        { src: "/lib/bootstrap/js/bootstrap.min.js", defer: true },
        { src: "/lib/easing/easing.min.js", defer: true },
        { src: "/lib/owlcarousel/owl.carousel.min.js", defer: true },
        { src: "/lib/scrollreveal/scrollreveal.min.js", defer: true },
        { src: "/lib/contactform.js", defer: true },
        {
          src: "/lib/main.js",
          defer: true,
        },
      ],
    },
  },

  modules: ["@nuxt/scripts"],
});

my folder structure
(for main.js https://gist.github.com/emirhanyagci/900af1354fb92abb50b9377c38e77579)