fix(useMediaQuery): only add/remove event listeners on query change

packages/core/useMediaQuery/index.ts

@@ -2,7 +2,7 @@
 
 import { ref, watchEffect } from 'vue-demi'
 import type { MaybeRefOrGetter } from '@vueuse/shared'
-import { toRef, tryOnScopeDispose } from '@vueuse/shared'
+import { toValue, tryOnScopeDispose } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
 import { useSupported } from '../useSupported'
@@ -21,25 +21,28 @@ export function useMediaQuery(query: MaybeRefOrGetter<string>, options: Configur
   let mediaQuery: MediaQueryList | undefined
   const matches = ref(false)
 
+  const update = (event: MediaQueryListEvent) => {
+    matches.value = event.matches
+  }
+
   const cleanup = () => {
     if (!mediaQuery)
       return
     if ('removeEventListener' in mediaQuery)
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
       mediaQuery.removeEventListener('change', update)
     else
       // @ts-expect-error deprecated API
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
       mediaQuery.removeListener(update)
+    mediaQuery = undefined
   }
 
-  const update = () => {
+  const stopWatch = watchEffect(() => {
     if (!isSupported.value)
       return
 
     cleanup()
 
-    mediaQuery = window!.matchMedia(toRef(query).value)
+    mediaQuery = window!.matchMedia(toValue(query))
     matches.value = !!mediaQuery?.matches
 
     if (!mediaQuery)
@@ -50,10 +53,11 @@ export function useMediaQuery(query: MaybeRefOrGetter<string>, options: Configur
     else
       // @ts-expect-error deprecated API
       mediaQuery.addListener(update)
-  }
-  watchEffect(update)
 
-  tryOnScopeDispose(() => cleanup())
+    return cleanup
+  })
+
+  tryOnScopeDispose(stopWatch)
 
   return matches
 }