diff --git a/packages/ui-vue/components/section/src/section.component.tsx b/packages/ui-vue/components/section/src/section.component.tsx
index be0a96e305f6b633090a4fb4f6b2cca3cf35b1cb..f69e192873fd09960181cd296b693a3030660750 100644
--- a/packages/ui-vue/components/section/src/section.component.tsx
+++ b/packages/ui-vue/components/section/src/section.component.tsx
@@ -79,7 +79,7 @@ export default defineComponent({
                         {shouldShowHeaderTitle.value && (
                             <div class="f-title">
                                 <h4 class="f-title-text">{mainTitle.value}</h4>
-                                {shouldShowSubHeaderTitle.value && <span>{subTitle}</span>}
+                                {shouldShowSubHeaderTitle.value && <span>{subTitle.value}</span>}
                             </div>
                         )}
                     </div>
diff --git a/packages/ui-vue/docs/components/section/index.md b/packages/ui-vue/docs/components/section/index.md
index 2c130be377988cefadec9de4f4c3c5e5c9043142..c293fbe336e1e1fa7053c5f811724d0a912dd1d4 100644
--- a/packages/ui-vue/docs/components/section/index.md
+++ b/packages/ui-vue/docs/components/section/index.md
@@ -11,10 +11,8 @@ Section 组件为开发者提供了一个具有标题的组件容器。
 import { ref } from 'vue';
 </script>
 <template>
-    <f-section main-title="This is a section title">
-        <div>
-            <span>This is setion content.</span>
-        </div>
+    <f-section main-title="This is section title">
+        <div>This is section component.</div>
     </f-section>
 </template>
 ```