Sentry not initializing in Vue 3 custom components

Question

I'm getting the following warning when trying to connect sentry in my vue 3 custom web components

[@sentry/vue]: Misconfigured SDK. Vue specific errors will not be captured. Update your `Sentry.init` call with an appropriate config option: `app` (Application Instance - Vue 3) or `Vue` (Vue Constructor - Vue 2)

This is my applications entry point

// Custom Elements 
export function registerComponent1() {
  customElements.define('name1', defineCustomElement(Component1));
}
export function registerComponent2() {
  customElements.define('name2', defineCustomElement(Component2));
}
export function registerComponent3() {
  customElements.define('name3', defineCustomElement(Component3));
}


export const defineCustomElement = (component) => {
  
  return VueDefineCustomElement({
    setup() {
      const inst = getCurrentInstance();

      Sentry.init({
        app: inst.appContext.app,
        dsn: '...'
        integrations: [Sentry.browserTracingIntegration()],
        // Performance Monitoring
        tracesSampleRate: 1.0, //  Capture 100% of the transactions
      });

      return () => h(component);
    },
  });
};

I tested the connect by created a button like such and it seems to be working

function sendSentryData() {
  Sentry.captureMessage('Button clicked');
}

 <button @click="sendSentryData">Click me</button>

So what's causing this issue, like I want to track when networks requests fail, vue or non-vue specific issues. Also will implementing it like such initialize Sentry three times?

passed application instance to Sentry.init by

getCurrentInstance().appContext.app;