Embedding App Owns Data PowerBI Report in Nuxt

Anyone have a Nuxt component for embedding a PowerBI report.  I've been using the 

<script setup lang="ts">
import { PowerBIReportEmbed } from "powerbi-client-vue-js";
import { models } from "powerbi-client";

const isLoaded = ref<boolean>(false);

const props = defineProps({
  reportId: {
    type: String,
    required: true,
  },
  workspaceId: {
    type: String,
    required: true,
  },
});
const { reportId, workspaceId } = props;

const { data } = await useFetch("/api/embedData", {
  cache: "no-cache",
  query: {
    reportId,
    workspaceId,
  },
});

const accessToken = data.value?.accessToken;
const embedUrl = data.value?.embedUrl;

const embedConfig = ref<models.IReportEmbedConfiguration>({
  type: "report",
  embedUrl: undefined,
  tokenType: models.TokenType.Embed,
  accessToken: undefined,
  settings: undefined,
});

const phasedEmbedding = false;
isLoaded.value = true;

embedConfig.value = {
  type: "report",
  id: reportId,
  embedUrl: embedUrl,
  accessToken: accessToken,
  tokenType: models.TokenType.Embed,
  permissions: models.Permissions.Read,
  settings: {
    panes: {
      filters: { expanded: false, visible: false },
      pageNavigation: { visible: false },
    },
    // background: models.BackgroundType.Transparent,
  },
};

const eventHandlers = new Map([
  ["loaded", () => console.log("Report Loaded")],
  ["rendered", () => console.log("Report Rendered")],
  ["error", (event: any) => console.log(event.detail)],
]);
</script>

<template>
  <div>
    <PowerBIReportEmbed
      v-if="isLoaded"
      :embedConfig="embedConfig"
      :eventHandlers="eventHandlers"
      cssClassName="report-container"
      :phasedEmbedding="phasedEmbedding"
    />
  </div>
</template>

<style scoped>
.report-container {
  height: 50vh;
  margin: 2rem auto;
  width: 1000px;
  border-width: 2pt;
  border-color: blue;
  border-radius: 3pt;
  box-shadow: 3px 3px 2px silver;
}
</style>