I can't get the real breakpoint immediately

[ByeWord]

Describe the bug

const breakpoints = useBreakpoints(breakpointsAntDesign)
const resizeHandler = () => {
  console.log(unref(breakpoints.smaller("md")))
  mediaStore.isMobile = unref(breakpoints.smaller("md"))
}
useEventListener(window, 'resize', resizeHandler)
// I have to call nextTick to get real breakopint value
nextTick(() => {
  resizeHandler()
})

Reproduction

none

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 4.55 GB / 15.86 GB
  Binaries:
    Node: 14.18.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - E:\npm\npm_global\yarn.CMD
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.39)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[Archetipo95]

I think that my problem is linked to this issue.
I'm using the code from docs.

const breakpoints = useBreakpoints(breakpointsTailwind)
const lg = breakpoints.isGreater("lg")

And on the template:
<span>{{ lg }}</span>

I'm getting this warning in the console:

runtime-core.esm-bundler.js:38 [Vue warn]: Hydration text content mismatch in <span>:
- Client: false
- Server: true 

[xunmi1]

1. If you use greater, smaller, between, then you don't need to bind the resize event, the return value is a ref.

const breakpoints = useBreakpoints(breakpointsAntDesign);
const isMobile = breakpoints.smaller('md');
watchEffect(() => (mediaStore.isMobile = isMobile.value));

2. The issue comes from the initial value of useMediaQuery is false, and tryOnBeforeMount can't be safely called in some cases. useMediaQuery is not working as expected #1591 (comment)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ideafm]

Any result to avoid hydration mismatch?