From 2b6bb43ccf50e889ebb0cf20847c28fd222d419a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=A8=E8=8D=A3?= <372638156@qq.com>
Date: Wed, 6 Jul 2022 17:02:07 +0800
Subject: [PATCH 1/2] fix(templateRef): add Component type fix #1757

---
 packages/core/templateRef/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/templateRef/index.ts b/packages/core/templateRef/index.ts
index 75e4fb50d75..5a84ed584c3 100644
--- a/packages/core/templateRef/index.ts
+++ b/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>> {

From 4db0a8286c0b33a5eff4790ab8512a2f9dcb7512 Mon Sep 17 00:00:00 2001
From: Hollis Wu <whyhollis@gmail.com>
Date: Thu, 15 Sep 2022 09:41:14 +0800
Subject: [PATCH 2/2] fix(templateRef): add test for templateRef with vue
 component

---
 packages/core/templateRef/index.test.ts | 27 +++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/packages/core/templateRef/index.test.ts b/packages/core/templateRef/index.test.ts
index 5df24758d9e..3ecb16c5e4e 100644
--- a/packages/core/templateRef/index.test.ts
+++ b/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')
+  })
 })