diff --git a/src/pages/index-page.vue b/src/pages/index-page.vue
index ba89484..21b8b77 100644
--- a/src/pages/index-page.vue
+++ b/src/pages/index-page.vue
@@ -17,7 +17,16 @@ definePage({
 import type { FunctionalComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const { locale } = useI18n();
+const { locale, t } = useI18n({
+  messages: {
+    en: {
+      message: 'This is an important message!',
+    },
+    zh: {
+      message: '这是一条重要消息！',
+    },
+  },
+});
 
 // https://cn.vuejs.org/guide/extras/render-function#typing-functional-components
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -47,6 +56,7 @@ const FComponent: FunctionalComponent<{ prop: string }> = (props, context) => (
     </select>
     <h1>{{ $t('welcome') }}</h1>
     <p>{{ $t('hello', { name: 'John' }) }}</p>
+    <p class="message">{{ t('message') }}</p>
   </div>
 
   <FComponent prop="Hello World" style="margin-top: 8px"></FComponent>