Structured data and Vue3

Technical Questions
1

Hi,
When rendering a Component from client-side Vue3, the content bound to a datastructure model is not rendering. It behaves as if the structured data is not available.

Do you have some pointers on how to troubleshoot this?
The same page renders well in nuxt, but in vue3 is not.

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key
8b441be145d94ab196d7065752974c65

What are you trying to accomplish
Integrate a page model into a vue3 page.

Screenshots or video link
https://www-dev.crane.com/page/personalized-stationery

Code stack you are integrating Builder with
Vue3 with Vite

Reproducible code example

<template>
  <div class="d-flex flex-column landing-page-height">
   
    <Content
      :model="model"
      :content="content"
      :api-key="BUILDER_PUBLIC_API_KEY"
      :customComponents="[]"
    />
    <FooterComponent class="mt-auto" />
  </div>
</template>
<script>
const baseUrl = import.meta.env.VITE_BASE_URL;
import {
  Content,
  fetchOneEntry,
  isPreviewing,
  getBuilderSearchParams,
} from "@builder.io/sdk-vue";
import FooterComponent from "@/components/layout/footer/FooterComponent.vue";
const builderPublicApiKey = import.meta.env.VITE_BUILDER_PUBLIC_API_KEY;

export default {
  name: "BuilderPage",
  data: () => ({
    content: null,
    canShowContent: false,
    model: "page",
    BUILDER_PUBLIC_API_KEY: builderPublicApiKey
  }),
  components: {
    // LandingComponent,
    Content,
    FooterComponent,
  },
  computed: {
    canonical: function () {
      return this.$route.meta.canonical;
    },
    landingPageContent: function () {
      return this.$store.state.layout.pageContent;
    },
    pageId: function () {
      return this.$route.meta.pid;
    },
  },
  methods: {
    pageData() {
      if (this.landingPageContent.length) {
        let data = this.landingPageContent.filter((element) => {
          return element.id === this.pageId;
        });
        if (data.length > 0) {
          return data[0];
        }
      }
    },
  },
  async mounted() {
    const val = await fetchOneEntry({
      model: this.model,
      apiKey:  builderPublicApiKey,
      options: getBuilderSearchParams(new URL(location.href).searchParams),
      userAttributes: {
        urlPath: this.$route.params.slug ? '/'+this.$route.params.slug: "/personalized-stationery",
      },
    });
    this.content = val;
    this.canShowContent = this.content ? true : isPreviewing();
  },
  metaInfo() {
    return {
      titleTemplate: `${
        this.landingPageContent &&
        this.pageData() &&
        this.pageData().title != undefined
          ? this.pageData().title
          : ""
      }`,
      title: `${
        this.landingPageContent &&
        this.pageData() &&
        this.pageData().title != undefined
          ? this.pageData().title
          : ""
      }`,
      description: `${
        this.landingPageContent &&
        this.pageData() &&
        this.pageData().metaDescription != undefined
          ? this.pageData().metaDescription
          : ""
      }`,

      link: [
        {
          rel: "canonical",
          href: `${
            this.canonical ? window.location.href.split("?")[0] : baseUrl
          }`,
        },
      ],
    };
  },
};
</script>
<style src="./builderio_page.scss" lang="scss" scoped />```