title: can't use template ref on component in vue 3 composition api
body: <p>I want to get the dimensions of a vue.js component from the parent (I'm working with the experimental <a href="https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md" rel="noreferrer">script setup</a>).</p>
  <p>When I use the ref inside a component, it works as expected. I get the dimensions:</p>
  <pre class="lang-html prettyprint-override"><code>// Child.vue
  &lt;template&gt;
    &lt;div ref=&quot;wrapper&quot;&gt;
     // content ...
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script setup&gt;
  import { ref, onMounted } from 'vue'
  
  const wrapper = ref(null)
  
  onMounted(() =&gt; {
    const rect = wrapper.value.getBoundingClientRect()
    console.log(rect) // works fine!
  })
  &lt;/script&gt;
  </code></pre>
  <p>But I want to get the dimension inside the parent component. Is this possible?</p>
  <p>I have tried this:</p>
  <pre class="lang-html prettyprint-override"><code>// Parent.vue
  &lt;template&gt;
    &lt;Child ref=&quot;wrapper&quot; /&gt;
  &lt;/template&gt;
  &lt;script setup&gt;
  import Child from './Child'
  import { ref, onMounted } from 'vue'
  
  const wrapper = ref(null)
  
  onMounted(() =&gt; {
    const rect = wrapper.value.getBoundingClientRect()
    console.log(rect) // failed!
  })
  &lt;/script&gt;
  </code></pre>
  <p>the console logs this error message:
  <code>Uncaught (in promise) TypeError: x.value.getBoundingClientRect is not a function</code></p>
  <hr />
  <p>In the documentation I can only find the way to use <code>template refs</code> <a href="https://v3.vuejs.org/guide/composition-api-template-refs.html#template-refs" rel="noreferrer">inside the child component</a></p>
  <p>does this approach not work because the refs are &quot;closed by default&quot; as the <a href="https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md#closed-by-default" rel="noreferrer">rfcs description says</a>?</p>