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')
+  })
 })
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>> {