Issue using Primevue Dynamic Dialog inside Nuxt 3 application

I'm trying to use PrimeVue DynamicDialog (https://primevue.org/dynamicdialog) inside my Nuxt 3 application. So I built a simple test page with a button that when clicked has to show a popup with a component inside. But actually if I click on the button it doesn't open the popup and also does not give me any error. I made some research but was not able to figure out where I'm wrong.

this is what I addeed to my nuxt.config.ts

  plugins: [
    { src: "~/plugins/dialogservice.ts", ssr: false }, // Ensure it's not SSR
  ],

this is the content of dialogservice.ts

// ~/plugins/dialogservice.ts
import { useNuxtApp } from "#app"; // Correct import
import { defineNuxtPlugin } from "#app"; // Correct import
import { DialogService } from "primevue";

export default defineNuxtPlugin((nuxtApp) => {
  const app = useNuxtApp().vueApp;
  if (app) {
    app.use(DialogService); // Assuming you've imported DialogService
    return {
      provide: {
        dialogService: DialogService, // Make it globally accessible
      },
    };
  }
});

this is my App.vue

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
    <DynamicDialog />
  </div>
</template>

this is my pages/test.vue

<template>
  <div class="card flex justify-center">
    <Button
      label="Select a Product"
      icon="pi pi-search"
      @click="showProducts"
    />
    <Toast />
  </div>
</template>

<script setup>
import { markRaw, defineAsyncComponent } from "vue";
import { useDialog } from "primevue/usedialog";
import { useToast } from "primevue/usetoast";
import Button from "primevue/button";
const ProductListDemo = defineAsyncComponent(() =>
  import("./../components/testPopup.vue")
);

const dialog = useDialog();
const toast = useToast();

const showProducts = () => {
  console.log("dai apriti");
  const dialogRef = dialog.open(ProductListDemo, {
    props: {
      header: "Product List",
      style: {
        width: "50vw",
      },
      breakpoints: {
        "960px": "75vw",
        "640px": "90vw",
      },
      modal: true,
    },
    onClose: (options) => {
      const data = options.data;
      if (data) {
        const buttonType = data.buttonType;
        const summary_and_detail = buttonType
          ? {
              summary: "No Product Selected",
              detail: `Pressed '${buttonType}' button`,
            }
          : { summary: "Product Selected", detail: data.name };

        toast.add({ severity: "info", ...summary_and_detail, life: 3000 });
      }
    },
  });
};
</script>

and finally this is my simple component used for test components/testPopup.vue

<template>
  <h1>This is my custom component</h1>
  <p>Lorem ipsum sic dolor....</p>
</template>

the dialogservice seems to be registered as I see it imn my Nuxt dev tools