Audio Worklet Web assembly port from vanilla to Vue

So there is this project called heavy compiler , that basically turns puredata patches into web assembly , a recent port creates an audio worklet.
Im trying to use vue instead of vanilla since the template generates a vanilla project , but I cant find a way to do the import in Vue.

this is how the index.html looks like

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test1</title>

    <!-- Generated javascript library includes -->
    <script type="application/javascript" src="./test1.js"></script>
    <style>
      .widget { max-width: 900px; margin: auto; }
      .row { width: 100%; margin-bottom: 10px; }
      .col { display: inline-block; }
      .title { width: 80%; margin: 0 auto; }
      .transport { padding-left: 10px; }
      .parameter-name { width: 35%; text-align: right; }
      .parameter-slider { width: 45%; padding-left: 10px; }
      .parameter-slider input { vertical-align: middle; width: 100%; }
      .parameter-value { width: 10%; padding-left: 10px; text-align: left; }
      .link { margin: 10px 10px 0 0; float: right; }
      span { text-align: right; }
    </style>

    <script type="text/javascript">
      var heavyModule = null;
      var loader = null;

      window.onload = function() {
        test1_Module().then(loadedModule => {
          heavyModule = loadedModule;
          moduleLoaded();
        });
        document.getElementById("transportButton").style.visibility = "hidden";
      }

      function moduleLoaded() {
        loader = new heavyModule.AudioLibLoader();
        document.getElementById("transportButton").style.visibility = "visible";
      }

      async function start() {
        if(!loader.webAudioContext) {
          await loader.init({
            // optional: set audio processing block size, default is 2048
            blockSize: 2048,
            // optional: provide a callback handler for [print] messages
            printHook: onPrint,
            // optional: provide a callback handler for [s {sendName} @hv_param] messages
            sendHook: onFloatMessage,
            // optional: pass an existing web audio context, otherwise a new one
            // will be constructed.
            webAudioContext: null
          });
          updateSlider_freq(500.0);
          updateSlider_gain(0.5);
          }
        loader.start();
      }

      function stop() {
        loader.stop();
      }

      function toggleTransport(element) {
        (loader.isPlaying) ? stop() : start();
      }

      function onPrint(message) {
        console.log(message);
      }

      function onFloatMessage(sendName, floatValue) {
        console.log(sendName, floatValue);
      }
      // Generated Parameter Update Methods
      function updateSlider_freq(value) {
        document.getElementById("value_freq").textContent = Number(value).toFixed(2);
        if(loader.webAudioWorklet) {
          loader.sendFloatParameterToWorklet("freq", value)
        } else {
          loader.audiolib.setFloatParameter("freq", value);
        }
      }

      function updateSlider_gain(value) {
        document.getElementById("value_gain").textContent = Number(value).toFixed(2);
        if(loader.webAudioWorklet) {
          loader.sendFloatParameterToWorklet("gain", value)
        } else {
          loader.audiolib.setFloatParameter("gain", value);
        }
      }

    </script>
  </head>
  <body>
    <div class="widget">
      <div class="row title">
        <div class="col"><h2>test1</h2></div>
        <div class="col transport">
          <label>
            start / stop
            <input type="checkbox" id="transportButton" onchange="toggleTransport();">
          </label>
        </div>
      </div>
      <div class="row">
        <div class="col parameter-name">freq</div>
        <div class="col parameter-slider">
          <input id="parameter_freq" type="range" min="100.0" max="2000.0" step="0.01" value="500.0" onchange="updateSlider_freq(value);" oninput="updateSlider_freq(value)">
        </div>
        <div class="col parameter-value" id="value_freq">500.0</div>
      </div>
      <div class="row">
        <div class="col parameter-name">gain</div>
        <div class="col parameter-slider">
          <input id="parameter_gain" type="range" min="0.0" max="1.0" step="0.01" value="0.5" onchange="updateSlider_gain(value);" oninput="updateSlider_gain(value)">
        </div>
        <div class="col parameter-value" id="value_gain">0.5</div>
      </div>
      <div class="row">
        <span class="link"><em>powered by <a href="https://github.com/Wasted-Audio/hvcc"><strong>heavy</strong></em></a></span>
      </div>
    </div>
  </body>
</html>

And this are the 2 js files generated with emscripten
test1_AudioLibWorklet.js
test1.js

All I read around is to import wasm files etc , but this is generated js from the compiler so I really dont understand how to use the async calls to load the module etc they use in the vanilla

bump
Still didn’t figure this out and would love to find a way