What package within Headless UI are you using?

"@headlessui/vue"

What version of that package are you using?

1.7.22

What browser are you using?

Chrome

Reproduction URL

I copied fragment from docs: https://headlessui.com/v1/vue/transition

<template>
  <button @click="isShowing = !isShowing">Toggle</button>
  <TransitionRoot :show="isShowing">
    I will appear and disappear.
  </TransitionRoot>
</template>

<script setup>
  import { ref } from 'vue'
  import { TransitionRoot } from '@headlessui/vue'

  const isShowing = ref(true)
</script>

and pasted into component called TransitionDebug

I have "vue": "3.4.14" with vite 5.

Describe your issue

I added this component to app inside of Setting component and after page load I see

main.ts:22 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 
  at <Anonymous onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterEnter> onBeforeLeave=fn<onBeforeLeave>  ... > 
  at <Anonymous show=true > 
  at <TransitionDebug> 
  at <Settings onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

I can see paragraph I will appear and disappear.

When I clicking toggle button, I see warning in console

TransitionDebug.vue:2 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 
  at <Anonymous onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterEnter> onBeforeLeave=fn<onBeforeLeave>  ... > 
  at <Anonymous show=false > 
  at <TransitionDebug> 
  at <Settings onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {saveSettings: ƒ, …} > > 
  at <RouterView> 
  at <App>

but paragraph is constantly displayed.

I have another project with nuxt, where this error is not possible to reproduce.

Potentially linked issues: https://github.com/tailwindlabs/headlessui/issues/959 Bug: Dialog and TransitionRoot is not working as documented https://github.com/tailwindlabs/headlessui/issues/2939 Transition broken with vue v3.4.15

Update

Now inspired by @albertpratomo I fixing by

  <transition name="fade">
    <span v-if="isShowing">I will appear and disappear.</span>
  </transition>

instead of

  <TransitionRoot :show="isShowing">
    I will appear and disappear.
  </TransitionRoot>

tailwindlabs / headlessui

Missing ref owner context. ref cannot be used on hoisted vnodes. [ TransitionRoot with vite ] #3286

Update