How do we use template refs with components?

[tony19]

Template refs work with native elements, but they don't seem to have an effect on components, as seen in the example below. Is it just not supported? Or is this a bug?

Example:

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  function Counter(props) {
    return {
      count: props.initialCount,
      inc() {
        this.count++
      },
      mounted() {
        console.log(`I'm mounted!`)
      }
    }
  }

  createApp({
    Counter
  }).mount()
</script>

<div v-scope>
  <div ref="myCounter" v-scope="Counter({ initialCount: 1 })" @mounted="mounted">
    <p>{{ count }}</p>

    <!-- moved outside component -->
    <!-- <button @click="inc">increment</button> -->
  </div>

  <!-- ❌ template ref not found -->
  <button @click="$refs.myCounter.inc()">Increment</button>
</div>

[halivert]

Indeed, it looks like a bug 🤔