[vue warn]: Hydration text content mismatch

[Yoonseonwoong]

Hi,
Thank you for creating this library.
I have a problem that bothers me.

After setting up the plug-in in the nuxt.config file, a warning message appears when calling a function from page.
In the component(Nuxt components is known as server-side rendering) template The warning message is not exposed when inserting the tag.
But I want to know the fundamental solution.
Can you help me?

// https://nuxt.com/docs/api/configuration/nuxt-config
import eslintPlugin from 'vite-plugin-eslint';
export default defineNuxtConfig({
	runtimeConfig: {
		public: {
			apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE || 'http://localhost:8080',
		},
	},
	modules: ['@nathanchase/nuxt-dayjs-module'],
	css: ['@/assets/scss/import.scss'],
	vite: {
		plugins: [eslintPlugin()],
	},
	dayjs: {
		locales: ['ko'],
		defaultLocale: 'ko',
		plugins: ['duration', 'relativeTime', 'advancedFormat', 'weekday', 'localeData'],
	},
	telemetry: false,
});

//Calendar.vue
<template>
<div v-for="(weekDay, no) in weekDays" :key="no" class="calendar-cell" :class="no === 0 ? 'holliday' : ''">
					<span>{{ weekDay }}</span>
				</div>
</template>
<script setup>
import { useNuxtApp } from '#app';
const { $dayjs } = useNuxtApp();
const weekDays = ref($dayjs().localeData().weekdaysShort());
</script>

//index.vue
<template>
    <Calendar></Calendar>
</template>