title: How to set up Vue 3 parent component to emit event to child component
body: <p>I am attempting to set up a button in a Vue 3 Tailwind parent component to trigger a HeadlessUI transition event in a child component. My goal is to enable the button in the parent to emit an event, while the child component &quot;watches&quot; for the event before triggering the transition event as part of the callback function in the watch. So far, I have the parent component set up to trigger the emit, while the child component is set up to watch for the &quot;transition&quot; event. However, the event is not being executed. I'm afraid I don't have the watch in the child component set up correctly, so as to watch for the button click in the parent component. How can I go about enabling the child component to watch for the click of the button in the parent component?</p>
  <p>Here is my code so far:</p>
  <p>Parent:</p>
  <pre><code>&lt;!-- This example requires Tailwind CSS v2.0+ --&gt;
  &lt;template&gt;
    &lt;div class=&quot;min-h-full&quot;&gt;
      &lt;Disclosure as=&quot;nav&quot; class=&quot;bg-gray-800&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
          &lt;div class=&quot;flex items-center justify-between h-16&quot;&gt;
            &lt;div class=&quot;flex items-center&quot;&gt;
              &lt;div class=&quot;hidden md:block&quot;&gt;
                &lt;div class=&quot;ml-10 flex items-baseline space-x-4&quot;&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;transition&quot; class=&quot;text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800&quot;&gt;Click to transition&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Disclosure&gt;
  
      &lt;main&gt;
        &lt;div class=&quot;max-w-7xl mx-auto py-6 sm:px-6 lg:px-8&quot;&gt;
          &lt;div class=&quot;px-4 py-6 sm:px-0&quot;&gt;
            &lt;HelloWorld :event=&quot;transition&quot; /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script setup&gt;
  import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
  import { BellIcon, MenuIcon, XIcon } from '@heroicons/vue/outline'
  import HelloWorld from './components/HelloWorld.vue'
  &lt;/script&gt;
  </code></pre>
  <p>Child:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;flex flex-col items-center py-16&quot;&gt;
      &lt;div class=&quot;w-96 h-96&quot;&gt;
        &lt;TransitionRoot
          appear
          :show=&quot;isShowing&quot;
          as=&quot;template&quot;
          enter=&quot;transform transition duration-[400ms]&quot;
          enter-from=&quot;opacity-0 rotate-[-120deg] scale-50&quot;
          enter-to=&quot;opacity-100 rotate-0 scale-100&quot;
          leave=&quot;transform duration-200 transition ease-in-out&quot;
          leave-from=&quot;opacity-100 rotate-0 scale-100 &quot;
          leave-to=&quot;opacity-0 scale-95 &quot;
        &gt;
          &lt;div class=&quot;w-full h-full bg-gray-400 rounded-md shadow-lg&quot; /&gt;
        &lt;/TransitionRoot&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script setup&gt;
  import { ref, toRefs, watch } from 'vue'
  import { TransitionRoot } from '@headlessui/vue'
  
  const props = defineProps({
    transition: Function
  })
  const { transition } = toRefs(props)
  const isShowing = ref(true)
  
  watch(transition, () =&gt; {
    isShowing.value = false
  
    setTimeout(() =&gt; {
      isShowing.value = true
    }, 500)
  })
  &lt;/script&gt;
  </code></pre>