diff --git a/src/collapse-item/index.js b/src/collapse-item/index.js
index 8e5d36350..c2dc3a32c 100644
--- a/src/collapse-item/index.js
+++ b/src/collapse-item/index.js
@@ -27,8 +27,8 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    const wrapper = ref(null);
-    const content = ref(null);
+    const wrapperRef = ref(null);
+    const contentRef = ref(null);
     const { parent, index } = useParent(COLLAPSE_KEY);
 
     const currentName = computed(() =>
@@ -49,7 +49,7 @@ export default createComponent({
       if (!expanded.value) {
         show.value = false;
       } else {
-        wrapper.value.style.height = '';
+        wrapperRef.value.style.height = '';
       }
     };
 
@@ -67,18 +67,18 @@ export default createComponent({
       const tick = value ? nextTick : raf;
 
       tick(() => {
-        if (!content.value || !wrapper.value) {
+        if (!contentRef.value || !wrapperRef.value) {
           return;
         }
 
-        const { offsetHeight } = content.value;
+        const { offsetHeight } = contentRef.value;
         if (offsetHeight) {
           const contentHeight = `${offsetHeight}px`;
-          wrapper.value.style.height = value ? 0 : contentHeight;
+          wrapperRef.value.style.height = value ? 0 : contentHeight;
 
           // use double raf to ensure animation can start
           doubleRaf(() => {
-            wrapper.value.style.height = value ? contentHeight : 0;
+            wrapperRef.value.style.height = value ? contentHeight : 0;
           });
         } else {
           onTransitionEnd();
@@ -121,12 +121,12 @@ export default createComponent({
       if (shouldRender.value) {
         return (
           <div
-            ref={wrapper}
+            ref={wrapperRef}
             vShow={show.value}
             class={bem('wrapper')}
             onTransitionend={onTransitionEnd}
           >
-            <div ref={content} class={bem('content')}>
+            <div ref={contentRef} class={bem('content')}>
               {slots.default?.()}
             </div>
           </div>
diff --git a/src/locale/index.ts b/src/locale/index.ts
index 0b2fb4e83..28487acf1 100644
--- a/src/locale/index.ts
+++ b/src/locale/index.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 import { deepAssign } from '../utils/deep-assign';
 import defaultMessages from './lang/zh-CN';
 
@@ -6,13 +6,13 @@ type Message = Record<string, any>;
 type Messages = Record<string, Message>;
 
 const lang = ref('zh-CN');
-const messages = ref<Messages>({
+const messages = reactive<Messages>({
   'zh-CN': defaultMessages,
 });
 
 export default {
   messages(): Message {
-    return messages.value[lang.value];
+    return messages[lang.value];
   },
 
   use(newLang: string, newMessages?: Message) {
@@ -21,6 +21,6 @@ export default {
   },
 
   add(newMessages: Message = {}) {
-    deepAssign(messages.value, newMessages);
+    deepAssign(messages, newMessages);
   },
 };
diff --git a/src/nav-bar/index.js b/src/nav-bar/index.js
index 2467f1567..ffe18e6e4 100644
--- a/src/nav-bar/index.js
+++ b/src/nav-bar/index.js
@@ -27,12 +27,12 @@ export default createComponent({
   emits: ['click-left', 'click-right'],
 
   setup(props, { emit, slots }) {
-    const navBar = ref(null);
     const height = ref(null);
+    const navBarRef = ref(null);
 
     onMounted(() => {
       if (props.placeholder && props.fixed) {
-        height.value = navBar.value.getBoundingClientRect().height;
+        height.value = navBarRef.value.getBoundingClientRect().height;
       }
     });
 
@@ -69,7 +69,7 @@ export default createComponent({
       const { title, fixed, border, zIndex } = props;
       return (
         <div
-          ref={navBar}
+          ref={navBarRef}
           style={{ zIndex }}
           class={[bem({ fixed }), { [BORDER_BOTTOM]: border }]}
         >