diff --git a/packages/rxjs/from/index.ts b/packages/rxjs/from/index.ts
index 0b21346fef9..436d58e1e90 100644
--- a/packages/rxjs/from/index.ts
+++ b/packages/rxjs/from/index.ts
@@ -2,6 +2,7 @@ import { Observable, fromEvent as fromEventRx, from as fromRxjs } from 'rxjs'
 import type { ObservableInput } from 'rxjs'
 import { filter, mergeMap } from 'rxjs/operators'
 import type { Ref, WatchOptions } from 'vue-demi'
+import type { MaybeRef } from '@vueuse/shared'
 import { isRef, watch } from 'vue-demi'
 
 export function from<T>(value: ObservableInput<T> | Ref<T>, watchOptions?: WatchOptions): Observable<T> {
@@ -19,9 +20,12 @@ export function from<T>(value: ObservableInput<T> | Ref<T>, watchOptions?: Watch
   }
 }
 
-export function fromEvent<T extends HTMLElement>(value: Ref<T>, event: string): Observable<Event> {
-  return from(value, { immediate: true }).pipe(
-    filter(value => value instanceof HTMLElement),
-    mergeMap(value => fromEventRx(value, event)),
-  )
+export function fromEvent<T extends HTMLElement>(value: MaybeRef<T>, event: string): Observable<Event> {
+  if (isRef<T>(value)) {
+    return from(value, { immediate: true }).pipe(
+      filter(value => value instanceof HTMLElement),
+      mergeMap(value => fromEventRx(value, event)),
+    )
+  }
+  return fromEventRx(value, event)
 }