diff --git a/playground/pages/Index.vue b/playground/pages/Index.vue
index b53672d..5588c20 100644
--- a/playground/pages/Index.vue
+++ b/playground/pages/Index.vue
@@ -188,6 +188,13 @@
       </button>
     </div>
 
+    <div class="mt-6">
+      <span class="font-semibold mr-4">useTippy + vue component:</span>
+      <UiButton ref="vueComponentButton">
+        Vue component Button
+      </UiButton>
+    </div>
+
     <div class="mt-6">
       <span class="font-semibold mr-4"
         >Tippy component + change content and props realtime using component
@@ -300,6 +307,7 @@ import {
 } from 'vue'
 import { useSingleton, useTippy, TippyOptions, TippyComponent } from '../../src'
 import Counter from '../components/Counter.vue'
+import UiButton from '../components/Button.vue'
 
 function useMousePosition() {
   const x = ref(0)
@@ -324,6 +332,7 @@ function useMousePosition() {
   }
 }
 export default defineComponent({
+  components: { UiButton },
   setup() {
     const counter = ref<number>(0)
 
@@ -398,6 +407,12 @@ export default defineComponent({
       triggerTarget: button7,
     })
 
+    const vueComponentButton = ref()
+
+    useTippy(vueComponentButton, {
+      content: 'Test Vue component',
+    })
+
     const { x, y } = useMousePosition()
 
     const { tippy } = useTippy(() => document.body, {
@@ -478,6 +493,7 @@ export default defineComponent({
       button6Inc,
       button7,
       target7,
+      vueComponentButton,
       tippyComponent1,
       log: console.log,
     }