Authentication using AWS Amplify auth, loading external script

App.vue

<script setup>
import { onMounted } from "vue";
import { Authenticator } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css";
onMounted(() => {
  const lex = document.createElement("script");
  lex.src = "https://d2hzdehb4i1g7i.cloudfront.net/lex-web-ui-loader.min.js";
  lex.onload = async function () {
    const loaderOpts = {
      baseUrl: "https://d2hzdehb4i1g7i.cloudfront.net/",
      shouldLoadMinDeps: true,
    };
    const loader = new window.ChatBotUiLoader.IframeLoader(loaderOpts);
    const config = {
      lex: { sessionAttributes: { userAgent: navigator.userAgent } },
    };
    loader
      .load(config)
      .then(function () {
        loader.api.startNewSession();
        loader.api.postText("Startup");
      })
      .catch(function (error) {
        console.error(error);
      });
  };
  document.body.appendChild(lex);
});
</script>
<template>
  <authenticator>
    <template v-slot="{ user, signOut }">
      <h1>Hello {{ user.username }}!</h1>
      <button @click="signOut">Sign Out</button>
    </template>
  </authenticator>
</template>