Laravel+Vue3(Inertia)单页应用中外部JS模块仅首次加载生效的问题求助

我用Laravel + Vue3（Inertia）搭建了一个单页应用，整体运行都没毛病，但最近碰到个头疼的问题：我有一个通用的JS模块，原本是给多个WordPress站点用的，它的逻辑是自动挂载到页面上id="form"的DOM元素上。

这个模块在WP站点上都能正常跑，但放到Inertia的SPA里就掉链子了：只有第一次打开表单页面时模块能正常加载并工作，一旦用Inertia的<Link>组件导航到其他页面，再返回表单页面，这个模块就完全不生效了。

现在我暂时用纯PHP页面来承载这个表单，但总觉得破坏了SPA的整体性，想找个更合理的解决办法！

目前的代码实现： #

1. Laravel控制器：
   控制器里就是简单返回Inertia的Form视图：

   return Inertia::render('Form');
   

2. Form.vue视图：
   页面里只放置了模块需要的挂载容器：

   <div id="form"></div>
   

3. 最初的脚本引入方式：
   我一开始是在app.blade.php里直接引入模块脚本：

   <script type="module" crossorigin src="{{ asset('/js/index-8AJeVKiN.js') }}"></script>
   

   结果发现模块完全不生效。

后续尝试的改进方案（仍未解决问题）： #

后来我把脚本加载逻辑移到了Form.vue的mounted钩子中，自己实现了一个动态加载脚本的方法：

<script>
export default {
  mounted() {
    this.loadScript('/js/index-8AJeVKiN.js', () => {
      // 脚本加载完成后的回调
    });
  },
  methods: {
    loadScript(src, callback) {
      // 检查脚本是否已加载
      if (!document.querySelector(`script[src="${src}"]`)) {
        const script = document.createElement('script');
        script.src = src;
        script.type = 'module';
        script.onload = callback;
        document.head.appendChild(script);
      } else {
        callback(); // 脚本已存在，直接执行回调
      }
    }
  }
}
</script>

但这么改完之后，问题依然存在：模块还是只有第一次打开表单页面时能正常工作，用Inertia导航返回后就彻底失效了。

有没有大佬能帮忙分析下问题根源，或者给个可行的解决方案呀？

备注：内容来源于stack exchange，提问作者Snoxik