Vue Error that is detected in Issue not propagated/visible in Replay under Errors tab

[isBrainDed]

Environment

self-hosted (https://develop.sentry.dev/self-hosted/)

Steps to Reproduce

1. Create a basic Vue3 project using npm create vue@latest ( Use "Yes" when it asks you for options )
2. Install sentry using the standard recommended config and don't use the tunnel ( Happens on Tunnel as well )
3. Change code inside App.vue. Replace script and template with this to create a simple error on click. ( something should throw an error inside updateBar() )

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue';
const message = ref("WelcomeMessage");

function updateBar() {
  message.value = new Date().toDateString();
  const response = fetch("https://this-is-error-now.com");
}
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <h1>{{ message }}</h1>
      <button @click="updateBar">TestError</button>

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

4. Check Sentry Issues and Sentry Replay

Expected Result

1. Sentry Issues -> New Issue is opened
2. Sentry Replays -> New replay is created with the TypeError visible on the Replay timeline and inside the "Error" tab

Actual Result

1. New Issue gets created
2. Replay gets created and Error tab is empty
3. Trace with error exists

Product Area

Replays

Link

No response

DSN

No response

Version

24.4.1