chore: example that use useModal outside out script setup

Author: hunterliu1003

packages/nuxt/playground/components/PlainCssConfirmModalPreview.vue

@@ -1,23 +1,12 @@
 <script setup lang="ts">
-import { ModalsContainer, useModal } from 'vue-final-modal'
-import PlainCssConfirmModal from './PlainCssConfirmModal.vue'
+import { ModalsContainer, useVfm } from 'vue-final-modal'
+import { showConfirmModal } from './showConfirmModal'
 
-const { open, close } = useModal({
-  component: markRaw(PlainCssConfirmModal),
-  attrs: {
-    title: 'Hello World!',
-    onConfirm() {
-      close()
-    },
-  },
-  slots: {
-    default: '<p>The content of the modal</p>',
-  },
-})
+const vfm = useVfm()
 </script>
 
 <template>
-  <button @click="() => open()">
+  <button @click="() => showConfirmModal(vfm)">
     Open Modal
   </button>
 

packages/nuxt/playground/components/showConfirmModal.ts

@@ -0,0 +1,24 @@
+import type { Vfm } from 'vue-final-modal'
+import { useModal } from 'vue-final-modal'
+import PlainCssConfirmModal from './PlainCssConfirmModal.vue'
+
+export function showConfirmModal(vfm: Vfm) {
+  const { open, close, destroy } = useModal({
+    context: vfm,
+    component: markRaw(PlainCssConfirmModal),
+    attrs: {
+      title: 'Hello World!',
+      onConfirm() {
+        close()
+      },
+      onClosed() {
+        destroy()
+      },
+    },
+    slots: {
+      default: '<p>The content of the modal</p>',
+    },
+  })
+
+  open()
+}