Nuxt 3 + Vuetify 3 SSR模式下断点响应式失效问题排查

• 在SSR模式下使用Nuxt 3搭配Vuetify 3时，显示断点功能失效（该功能在Nuxt 2与Vuetify 2组合中可正常工作）
• 即使当前屏幕为大屏尺寸，页面初始渲染的div元素仍显示红色背景而非预期的绿色
• 排查发现：服务端初始DOM渲染默认按小屏尺寸处理，客户端hydration阶段未将样式修正为实际大屏尺寸，尽管浏览器控制台已打印“result green”日志

相关代码如下：

<template>
  <div>
    <div :class="divClass">Reactivity</div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useDisplay } from 'vuetify'

const counter = ref(1)
const { lgAndUp } = useDisplay()

const divClass = computed(() => {
  const result = lgAndUp.value ? 'green' : 'red'
  console.log('result', result)

  return result
})
</script>

<style>
  .green {
    background-color: green;
  }
  .red {
    background-color: red;
  }
</style>

怀疑这是一个bug，但也可能是代码实现有误，恳请帮忙排查验证。

内容的提问来源于stack exchange，提问作者Tomasz Lempart