From 140ac6ff336b76d5cca30080821d93866b63a738 Mon Sep 17 00:00:00 2001
From: Georges KABBOUCHI <georges.kabbouchi@gmail.com>
Date: Tue, 18 Jul 2023 15:50:11 +0300
Subject: [PATCH] closes #290

---
 package.json                |  2 +-
 src/composables/useTippy.ts | 47 +++++++++++++++++++++++++------------
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 1ea6258..b0733b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-tippy",
-  "version": "6.2.0",
+  "version": "6.3.0-beta.1",
   "main": "index.js",
   "module": "dist/vue-tippy.mjs",
   "unpkg": "dist/vue-tippy.iife.js",
diff --git a/src/composables/useTippy.ts b/src/composables/useTippy.ts
index f5d75f7..ad79592 100644
--- a/src/composables/useTippy.ts
+++ b/src/composables/useTippy.ts
@@ -6,12 +6,12 @@ import {
   isRef,
   isReactive,
   isVNode,
-  render,
   watch,
   VNode,
   h,
   onUnmounted,
   getCurrentInstance,
+  createApp,
 } from 'vue'
 import { TippyOptions, TippyContent } from '../types'
 
@@ -26,8 +26,9 @@ export function useTippy(
   el: Element | (() => Element) | Ref<Element> | Ref<Element | undefined>,
   opts: TippyOptions = {},
   settings: {
-    mount: boolean
-  } = { mount: true }
+    mount: boolean,
+    appName: string,
+  } = { mount: true, appName: 'Tippy' }
 ) {
   const vm = getCurrentInstance()
   const instance = ref<Instance>()
@@ -38,12 +39,13 @@ export function useTippy(
     isMounted: false,
     isShown: false,
   })
+  const createAppMounted = ref(false)
 
   let container: any = null
 
   const getContainer = () => {
     if (container) return container
-    container = document.createDocumentFragment()
+    container = document.createElement("aside")
     return container
   }
 
@@ -56,28 +58,43 @@ export function useTippy(
       ? content.value
       : content
 
-    if (isVNode(unwrappedContent)) {
-      if (vm) {
-        unwrappedContent.appContext = vm.appContext
-      }
 
-      render(unwrappedContent, getContainer())
+    if (isVNode(unwrappedContent)) {
+      if (!createAppMounted.value) {
+        if (vm) {
+          unwrappedContent.appContext = vm.appContext
+        }
+        createApp({
+          name: settings.appName,
+          render: () => unwrappedContent,
+        })
+          .mount(getContainer())
+        createAppMounted.value = true
+      }
       newContent = () => getContainer()
     } else if (typeof unwrappedContent === 'object') {
-      let comp = h(unwrappedContent)
+      if (!createAppMounted.value) {
 
-      if (vm) {
-        comp.appContext = vm.appContext
+        let comp = h(unwrappedContent)
+
+        if (vm) {
+          comp.appContext = vm.appContext
+        }
+
+        createApp({
+          name: settings.appName,
+          render: () => comp,
+        })
+          .mount(getContainer())
+        createAppMounted.value = true
       }
 
-      render(comp, getContainer())
-
       newContent = () => getContainer()
     } else {
       newContent = unwrappedContent
     }
 
-    return newContent
+    return newContent!
   }
 
   const getProps = (opts: TippyOptions): Partial<Props> => {