Error with Vuejs3 (built application): "ReferenceError: _unref is not defined"

Question

I'm creating a website (still a work in progress), which is currently hosted on Netlify at the following link: ChillingConCarne.

On the about page, you will see that there is no content at all, with the following error message showing in the console: ReferenceError: _unref is not defined. If I build the app on my computer I get the same problem.

On the other hand, if you run the app locally (here is the GitHub repo), the content on the about page is shown just fine.

Here are the component's code:

<template>
  <div id="about">
    <div id="info">
      <h3>
        {{ " // " + about.position.toUpperCase() }}
      </h3>
      <h2>{{ about.name }}</h2>
      <div id="text">
        <p id="one-line">{{ about.line }}</p>
        <p>{{ about.description }}</p>
      </div>
      <ul>
        <li>
          <a :href="about.linkedin">
            <img
              src="https://unpkg.com/simple-icons@latest/icons/linkedin.svg"
              alt="LinkedIn"
              title="LinkedIn"
            />
          </a>
        </li>
        <li>
          <a :href="about.github">
            <img
              src="https://unpkg.com/simple-icons@latest/icons/github.svg"
              alt="Github"
              title="Github"
            />
          </a>
        </li>
      </ul>
    </div>
    <img id="portrait" :src="require(`@/assets/${about.picture}`)" />
  </div>
</template>

<script setup>
import { defineProps, toRefs } from "vue";
const props = defineProps({
  about: Object,
});
let { about } = toRefs(props);
</script>

<style scoped lang="scss">
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Roboto:wght@400&display=swap");
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
#about {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-around;
  #info {
    max-width: 600px;
    width: 80vw;
    text-align: left;
    margin-left: 20px;
    letter-spacing: 0.04em;
    h3 {
      opacity: 0;
      animation: fadeInUp 0.5s ease-in-out 0s forwards;
      font-size: 16px;
      font-weight: 600;
      line-height: 19px;
      color: #0090a6;
    }
    h2 {
      opacity: 0;
      animation: fadeInUp 1s ease-in-out 0s forwards;
      width: 200px;
      font-weight: 600;
      font-size: 96px;
      line-height: 86px;
      margin: 0;
      color: #0090a6;
      &:last-of-type {
        @media screen and (min-width:1240px) and (max-width:1550px) {
          font-size: 72px;
        }
        @media screen and (max-width:1050px) {
          font-size: 72px;
        }
        @media screen and (max-width:675px) {
          line-height: 54px;
          font-size: 54px;
        }
        @media screen and (max-width:500px) {
          line-height: 44px;
          font-size: 44px;
        }
        @media screen and (max-width:400px) {
          line-height: 36px;
          font-size: 36px;
        }
      }
    }
    #text {
      opacity: 0;
      animation: fadeInUp 1.5s ease-in-out 0s forwards;
      p {
        font-weight: 500;
        font-size: 18px;
        line-height: 21px;
        letter-spacing: 0.04em;
      }
      #one-line {
        font-weight: 600;
      }
    }
    ul {
      margin: 0;
      padding: 0;
      display: flex;
      li {
        list-style: none;
        img {
          width: 24px;
          margin-right: 20px;
        }
      }
    }
  }
  #portrait {
    max-width: 600px;
    max-height: 100%;
    width: 80vw;
    opacity: 0;
    animation: fadeInUp 1.5s ease-in-out 0s forwards;
  }
}
</style>

And the code of the page where they should be rendered:

<template>
  <section id="about-hero">
    <h1>
      We’re designers, developers, and builders making great things
      <strong>happen</strong>
    </h1>
    <Chevrons href="#about-portraits" />
    <div class="radial-gradient"></div>
    <div class="radial-gradient"></div>
  </section>
  <section id="about-portraits">
    <AboutPortrait
      v-for="(about, index) in about_array"
      :about="about"
      :key="index"
    />
  </section>
</template>

<script setup>
import Chevrons from "@/components/Global/Chevrons.vue";
import AboutPortrait from "@/components/About/AboutPortraitComponent.vue";
import { reactive } from "vue";
let about_array = reactive([
  {
    name: "### PRIVATE INFO ####",
    position: "co-founder - ceo",
    line: "### PRIVATE INFO ####",
    description:
      "### PRIVATE INFO ####",
    picture: "logo.png",
    linkedin: "### PRIVATE INFO ####",
    github: "### PRIVATE INFO ####",
  },
  {
    name: "### PRIVATE INFO ####",
    position: "co-founder - fullstack dev",
    line: "### PRIVATE INFO ####",
    description:
      "### PRIVATE INFO ####",
    picture: "logo.png",
    linkedin: "### PRIVATE INFO ####",
    github: "### PRIVATE INFO ####",
  },
  {
    name: "### PRIVATE INFO ####",
    position: "co-founder - designer",
    line: "### PRIVATE INFO ####",
    description:
      "### PRIVATE INFO ####",
    picture: "photos/eden.webp",
    linkedin: "### PRIVATE INFO ####",
    github: "### PRIVATE INFO ####",
  },
  {
    name: "### PRIVATE INFO ####",
    position: "co-founder - backend dev",
    line: "### PRIVATE INFO ####",
    description:
      "### PRIVATE INFO ####",
    picture: "photos/leandre.jpeg",
    linkedin: "### PRIVATE INFO ####",
    github: "### PRIVATE INFO ####",
  },
]);
</script>

<style lang="scss" scoped>
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@600&family=Roboto:wght@400&display=swap");
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
#about-hero {
  opacity: 0;
  animation: fadeInUp 2s ease-in-out 0s forwards;
  width: 100vw;
  height: 100vh;
  position: relative;
  & > h1 {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15em;
    font-family: "Raleway", sans-serif;
    font-size: 72px;
    font-weight: 300;
    color: black;
    & > strong {
      color: #0090a6;
    }
    @media screen and (max-width: 1100px) {
      font-size: 48px;
    }
    @media screen and (max-width: 750px) {
      font-size: 40px;
      width: 12em;
    }
    @media screen and (max-width: 450px) {
      width: 8em;
    }
  }
  & .radial-gradient {
    position: absolute;
    width: 75%;
    height: 50%;
    background: radial-gradient(
      50% 50% at 50% 50%,
      #b0f5ff 0%,
      rgba(255, 255, 255, 0) 100%
    );
    opacity: 1;
    &:first-of-type {
      transform: translate(-50%);
    }
    &:last-child {
      transform: translateX(50%);
      bottom: 0;
      right: 0;
    }
  }
}
#about-portraits {
  margin: 10vh 0;
  & > * {
    margin: 30vh 0;
  }
}
</style>

You'll find both of these files here: The component and The page

Do you have any idea what's going on? I haven't been able to find helpful resources online and I can't figure it out.