fix(templateRef): add Component type (#2203)

Co-authored-by: 木荣 <372638156@qq.com>

packages/core/templateRef/index.test.ts

@@ -72,4 +72,31 @@ describe('templateRef', () => {
 
     expect(vm.targetEl).toBe(null)
   })
+
+  it('support vue component as ref', async () => {
+    const ChildComponent = defineComponent({
+      name: 'ChildComponent',
+      render() {
+        return null
+      },
+    })
+
+    const vm = mount(defineComponent({
+      components: {
+        ChildComponent,
+      },
+      setup() {
+        const targetEl = templateRef<typeof ChildComponent>('target')
+        return {
+          targetEl,
+        }
+      },
+      render() {
+        return h(ChildComponent, { ref: 'target' })
+      },
+    }))
+
+    expect(vm.targetEl).toBeDefined()
+    expect(vm.targetEl.$options.name).toBe('ChildComponent')
+  })
 })

packages/core/templateRef/index.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue-demi'
+import type { Component, Ref } from 'vue-demi'
 import { customRef, getCurrentInstance, onUpdated } from 'vue-demi'
 import { tryOnMounted } from '@vueuse/shared'
 
@@ -9,7 +9,7 @@ import { tryOnMounted } from '@vueuse/shared'
  * @param key
  * @param initialValue
  */
-export function templateRef<T extends HTMLElement | SVGElement | null>(
+export function templateRef<T extends HTMLElement | SVGElement | Component | null>(
   key: string,
   initialValue: T | null = null,
 ): Readonly<Ref<T>> {