Scripts not loaded again on event resize; how to fix it

So right now whenever I resize the browser, scripts are not loaded, and the idea is only to load them for non mobile screen size. I know I could just use the scripts in the footer but then they will be loaded for mobile, maybe I can force them to be reloaded? Current code:

<script defer type="text/javascript">

window.addEventListener("resize", getTemplate);
CurrentPage = 'MobilePage';

function getTemplate() {
    if (screen.width >= 767 && CurrentPage != 'DesktopPage') {
      
        fetch('<?php bloginfo('template_url'); ?>/portafolio-desktop-slider.php')
          .then(response => response.text())          
          .then( resultText => document.getElementById('example').innerHTML = resultText );

       
          var head = document.getElementsByTagName('head')[0];
          var body = document.getElementsByTagName('body')[0];

          var VueScript = document.createElement("script");
          VueScript.src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js";
          VueScript.async = false;
          head.appendChild(VueScript);
                  
          var CarouselScript = document.createElement("script");
          CarouselScript.src = "https://wlada.github.io/vue-carousel-3d/js/carousel-3d.umd.js";
          CarouselScript.async = false;
          body.appendChild(CarouselScript);

          setTimeout(function(){
          var VueInitScript = document.createElement("script");
          VueInitScript.async = false;
          VueInitScript.src = "<?php bloginfo('template_url'); ?>/vue-init.js";
          body.appendChild(VueInitScript);

          }, 500);

          // cierre carga de scripts
    }

    if (screen.width < 767 && CurrentPage != 'MobilePage') {
        fetch('<?php bloginfo('template_url'); ?>/portafolio-mobile.php')
          .then(response => response.text())
          .then( resultText => document.getElementById('example').innerHTML = resultText )
    }
    }
getTemplate();

</script>