document is not defind when user refersh the page in nuxt 3

[DevMojahed]

Hi bro, I'm using vue3-persian-datetime-picker in Nuxt 3 project with TS language and script setup syntax
when project runs and I go to the page that I used it, it's ok, but when I refresh the page It make a 500 server error that says document is not defined!!

I used it like your document for a component

// template
<date-picker v-model="userFormData.birth_date"></date-picker>
// script
import DatePicker from 'vue3-persian-datetime-picker'

If for Nuxt 3 is any special step for installation and usage please write for me
thanks

[DevMojahed]

Now I test it again
I found it that if we use it like a single component :

// DataPicker.vue

<template>
    <client-only>
        <DatePicker v-model="date"></DatePicker>
    </client-only>
</template>

<script setup lang="ts">
import DatePicker from 'vue3-persian-datetime-picker'

const date = ref('')
</script>

we don't have any problem with it in nuxt 3