title: Vue 3 Composition API Provide/Inject not working in Single File Components
body: <p>I'm making a library in VueJS 3 using Composition API. I implemented Provide/Inject as mentioned in <a href="https://v3.vuejs.org/guide/composition-api-provide-inject.html#injection-reactivity" rel="nofollow noreferrer">docs</a>. But the property in child component is still undefined and I get following error in browser console:</p>
  <p><a href="https://i.stack.imgur.com/2Y6jw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Y6jw.png" alt="Console Output" /></a></p>
  <p>A very simple implementation of my code is as follow:</p>
  <blockquote>
  <p>Usage In Project</p>
  </blockquote>
  <pre><code>&lt;ThemeProvider&gt;
      &lt;Button color=&quot;green&quot;&gt;
          ABC
      &lt;/Button&gt;
  &lt;/ThemeProvider&gt;
  
  &lt;script&gt;
      import { ThemeProvider, Button } from 'my-library'
  
      export default {
          name: 'SomePage',
          setup() {...},
      }
  &lt;/script&gt;
  </code></pre>
  <blockquote>
  <p>ThemeProvider.js (Parent Componen)</p>
  </blockquote>
  <pre><code>import { toRefs, reactive, provide, h } from 'vue'
  
  export default {
      name: 'theme-provider',
      props:
          theme: {
              type: Object,
              default: () =&gt; ({...}),
          },
      },
      setup(props, { slots }) {
          const { theme } = toRefs(props)
  
          provide('theme', reactive(theme.value))
  
          return () =&gt;
              h(
                  'div',
                  {...},
                  slots.default()
              )
      },
  }
  </code></pre>
  <blockquote>
  <p>Button.js (Child Component)</p>
  </blockquote>
  <pre><code>import { inject, h } from 'vue'
  
  export default {
      name: 'Button',
      setup(props, { slots }) {
          const theme = inject('theme')
          console.log(theme)  // returns undefined
  
          return () =&gt;
              h(
                  'button',
                  {...},
                  slots.default()
              )
      },
  }
  </code></pre>