Hydration attribute mismatch, when using the Modal in Nuxt 3

[asrori7]

Describe the bug

In the nuxt framework, using the modal, a Hydration attribute mismatch warning, will be prompted in the console.

Reproduction

https://stackblitz.com/edit/nuxt-starter-uewfwc?file=app.vue

Steps to reproduce

<script setup lang="ts">
const active = ref(false);
</script>

<template>
  <div>
    <VButton type="primary" @click="active = !active"> Open </VButton>

    <VModal
      v-model:active="active"
      transfer
      title="Title"
      :width="500"
      :height="300"
      modal-class="demo-modal"
    >
      <VNativeScroll use-y-bar height="100%" scroll-style="padding: 14px;">
        <p v-for="n in 20" :key="n">Some content</p>
      </VNativeScroll>
    </VModal>
  </div>
</template>

System Info

No response

Validations

• 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 Vexip UI issue.
• The provided reproduction is a minimal reproducible example of the bug.

[qmhc]

duplicate of #463.

[asrori7]

oh sorry, i don't know if the modal module is the same as the drawer