diff --git a/src/datetime-picker/index.js b/src/datetime-picker/index.js
index a0de94b10..48ef3623a 100644
--- a/src/datetime-picker/index.js
+++ b/src/datetime-picker/index.js
@@ -13,15 +13,15 @@ export default createComponent({
   },
 
   setup(props) {
-    const rootRef = ref();
+    const root = ref();
 
     usePublicApi({
-      getPicker: () => rootRef.value && rootRef.value.getPicker(),
+      getPicker: () => root.value && root.value.getPicker(),
     });
 
     return () => {
       const Component = props.type === 'time' ? TimePicker : DatePicker;
-      return <Component ref={rootRef} class={bem()} {...props} />;
+      return <Component ref={root} class={bem()} {...props} />;
     };
   },
 });
diff --git a/src/dropdown-menu/index.js b/src/dropdown-menu/index.js
index 858dec090..6c4af2cbb 100644
--- a/src/dropdown-menu/index.js
+++ b/src/dropdown-menu/index.js
@@ -36,10 +36,10 @@ export default createComponent({
   setup(props, { slots }) {
     const offset = ref(0);
     const barRef = ref();
-    const rootRef = ref();
+    const root = ref();
     const children = reactive([]);
 
-    const scrollParent = useScrollParent(rootRef);
+    const scrollParent = useScrollParent(root);
 
     const opened = computed(() =>
       children.some((item) => item.state.showWrapper)
@@ -120,12 +120,12 @@ export default createComponent({
 
     provide(DROPDOWN_KEY, { props, offset, children });
 
-    useClickAway(rootRef, onClickAway);
+    useClickAway(root, onClickAway);
 
     useEventListener('scroll', onScroll, { target: scrollParent });
 
     return () => (
-      <div ref={rootRef} class={bem()}>
+      <div ref={root} class={bem()}>
         <div
           ref={barRef}
           style={barStyle.value}
diff --git a/src/index-anchor/index.js b/src/index-anchor/index.js
index f2896263e..fb71ad238 100644
--- a/src/index-anchor/index.js
+++ b/src/index-anchor/index.js
@@ -24,14 +24,14 @@ export default createComponent({
       active: false,
     });
 
-    const rootRef = ref();
-    const height = useHeight(rootRef);
+    const root = ref();
+    const height = useHeight(root);
 
     const { parent } = useParent(INDEX_BAR_KEY, {
       props,
       state,
       height,
-      rootRef,
+      root,
     });
 
     const isSticky = () => state.active && parent.props.sticky;
@@ -54,10 +54,7 @@ export default createComponent({
       const sticky = isSticky();
 
       return (
-        <div
-          ref={rootRef}
-          style={{ height: sticky ? `${height.value}px` : null }}
-        >
+        <div ref={root} style={{ height: sticky ? `${height.value}px` : null }}>
           <div
             style={anchorStyle.value}
             class={[bem({ sticky }), { [BORDER_BOTTOM]: sticky }]}
diff --git a/src/index-bar/index.js b/src/index-bar/index.js
index 320f522ae..dfccb48be 100644
--- a/src/index-bar/index.js
+++ b/src/index-bar/index.js
@@ -52,12 +52,12 @@ export default createComponent({
   emits: ['select'],
 
   setup(props, { emit, slots }) {
-    const rootRef = ref();
+    const root = ref();
     const activeAnchor = ref();
     const children = reactive([]);
 
     const touch = useTouch();
-    const scrollParent = useScrollParent(rootRef);
+    const scrollParent = useScrollParent(root);
 
     provide(INDEX_BAR_KEY, { props, children });
 
@@ -113,7 +113,7 @@ export default createComponent({
     };
 
     const onScroll = () => {
-      if (isHidden(rootRef.value)) {
+      if (isHidden(root.value)) {
         return;
       }
 
@@ -123,7 +123,7 @@ export default createComponent({
 
       const rects = children.map((item) => ({
         height: item.height,
-        top: getAnchorTop(item.rootRef, scrollParentRect),
+        top: getAnchorTop(item.root, scrollParentRect),
       }));
 
       const active = getActiveAnchor(scrollTop, rects);
@@ -132,9 +132,9 @@ export default createComponent({
 
       if (sticky) {
         children.forEach((item, index) => {
-          const { state, height, rootRef } = item;
+          const { state, height, root } = item;
           if (index === active || index === active - 1) {
-            const rect = rootRef.getBoundingClientRect();
+            const rect = root.getBoundingClientRect();
             state.left = rect.left;
             state.width = rect.width;
           } else {
@@ -192,7 +192,7 @@ export default createComponent({
       );
 
       if (match[0]) {
-        match[0].rootRef.scrollIntoView();
+        match[0].root.scrollIntoView();
 
         if (props.sticky && props.stickyOffsetTop) {
           setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop);
@@ -228,7 +228,7 @@ export default createComponent({
     };
 
     return () => (
-      <div ref={rootRef} class={bem()}>
+      <div ref={root} class={bem()}>
         <div
           class={bem('sidebar')}
           style={sidebarStyle.value}
diff --git a/src/list/index.js b/src/list/index.js
index 2639be501..d3ba5cf47 100644
--- a/src/list/index.js
+++ b/src/list/index.js
@@ -41,9 +41,9 @@ export default createComponent({
   setup(props, { emit, slots }) {
     // use sync innerLoading state to avoid repeated loading in some edge cases
     const loading = ref(false);
-    const rootRef = ref();
+    const root = ref();
     const placeholderRef = ref();
-    const scrollParent = useScrollParent(rootRef);
+    const scrollParent = useScrollParent(root);
 
     const check = () => {
       nextTick(() => {
@@ -67,7 +67,7 @@ export default createComponent({
           scrollParentRect.bottom - scrollParentRect.top;
 
         /* istanbul ignore next */
-        if (!scrollParentHeight || isHidden(rootRef.value)) {
+        if (!scrollParentHeight || isHidden(root.value)) {
           return false;
         }
 
@@ -153,7 +153,7 @@ export default createComponent({
       );
 
       return (
-        <div ref={rootRef} role="feed" class={bem()} aria-busy={loading.value}>
+        <div ref={root} role="feed" class={bem()} aria-busy={loading.value}>
           {props.direction === 'down' ? Content : Placeholder}
           {renderLoading()}
           {renderFinishedText()}
diff --git a/src/number-keyboard/index.js b/src/number-keyboard/index.js
index 4f0c22c26..7549fb2e7 100644
--- a/src/number-keyboard/index.js
+++ b/src/number-keyboard/index.js
@@ -60,7 +60,7 @@ export default createComponent({
   ],
 
   setup(props, { emit, slots }) {
-    const rootRef = ref();
+    const root = ref();
 
     const genBasicKeys = () => {
       const keys = [];
@@ -224,14 +224,14 @@ export default createComponent({
       }
     );
 
-    useClickAway(rootRef, onClose, { eventName: 'touchstart' });
+    useClickAway(root, onClose, { eventName: 'touchstart' });
 
     return () => {
       const Title = renderTitle();
       const Content = (
         <Transition name={props.transition ? 'van-slide-up' : ''}>
           <div
-            ref={rootRef}
+            ref={root}
             vShow={props.show}
             style={{ zIndex: props.zIndex }}
             class={bem({
diff --git a/src/progress/index.js b/src/progress/index.js
index 612124341..50f5bc976 100644
--- a/src/progress/index.js
+++ b/src/progress/index.js
@@ -24,7 +24,7 @@ export default createComponent({
   },
 
   setup(props) {
-    const rootRef = ref();
+    const root = ref();
     const pivotRef = ref();
 
     const state = reactive({
@@ -38,7 +38,7 @@ export default createComponent({
 
     const setWidth = () => {
       nextTick(() => {
-        state.rootWidth = rootRef.value.offsetWidth;
+        state.rootWidth = root.value.offsetWidth;
         state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0;
       });
     };
@@ -81,7 +81,7 @@ export default createComponent({
       };
 
       return (
-        <div ref={rootRef} class={bem()} style={rootStyle}>
+        <div ref={root} class={bem()} style={rootStyle}>
           <span class={bem('portion')} style={portionStyle}>
             {renderPivot()}
           </span>
diff --git a/src/pull-refresh/index.js b/src/pull-refresh/index.js
index ad8df4213..0b03040a3 100644
--- a/src/pull-refresh/index.js
+++ b/src/pull-refresh/index.js
@@ -47,8 +47,8 @@ export default createComponent({
   setup(props, { emit, slots }) {
     let reachTop;
 
-    const rootRef = ref();
-    const scrollParent = useScrollParent(rootRef);
+    const root = ref();
+    const scrollParent = useScrollParent(root);
 
     const state = reactive({
       status: 'normal',
@@ -201,7 +201,7 @@ export default createComponent({
       };
 
       return (
-        <div ref={rootRef} class={bem()}>
+        <div ref={root} class={bem()}>
           <div
             class={bem('track')}
             style={trackStyle}
diff --git a/src/slider/index.js b/src/slider/index.js
index 3a8221804..175fc71fe 100644
--- a/src/slider/index.js
+++ b/src/slider/index.js
@@ -46,7 +46,7 @@ export default createComponent({
     let currentValue;
     let index;
 
-    const rootRef = ref();
+    const root = ref();
     const dragStatus = ref();
     const touch = useTouch();
 
@@ -132,7 +132,7 @@ export default createComponent({
       }
 
       const { min, vertical, modelValue, range } = props;
-      const rect = useRect(rootRef);
+      const rect = useRect(root);
       const delta = vertical
         ? event.clientY - rect.top
         : event.clientX - rect.left;
@@ -182,7 +182,7 @@ export default createComponent({
       touch.move(event);
       dragStatus.value = 'draging';
 
-      const rect = useRect(rootRef);
+      const rect = useRect(root);
       const delta = props.vertical ? touch.deltaY.value : touch.deltaX.value;
       const total = props.vertical ? rect.height : rect.width;
       const diff = (delta / total) * scope.value;
@@ -253,7 +253,7 @@ export default createComponent({
 
     return () => (
       <div
-        ref={rootRef}
+        ref={root}
         style={wrapperStyle.value}
         class={bem({
           vertical: props.vertical,
diff --git a/src/sticky/index.js b/src/sticky/index.js
index a9f05cf88..db3114c0b 100644
--- a/src/sticky/index.js
+++ b/src/sticky/index.js
@@ -25,8 +25,8 @@ export default createComponent({
   emits: ['scroll'],
 
   setup(props, { emit, slots }) {
-    const rootRef = ref();
-    const scrollParent = useScrollParent(rootRef);
+    const root = ref();
+    const scrollParent = useScrollParent(root);
 
     const state = reactive({
       fixed: false,
@@ -61,15 +61,15 @@ export default createComponent({
     };
 
     const onScroll = () => {
-      if (isHidden(rootRef.value)) {
+      if (isHidden(root.value)) {
         return;
       }
 
-      state.height = rootRef.value.offsetHeight;
+      state.height = root.value.offsetHeight;
 
       const { container } = props;
       const scrollTop = getScrollTop(window);
-      const topToPageTop = getElementTop(rootRef.value);
+      const topToPageTop = getElementTop(root.value);
 
       // The sticky component should be kept inside the container element
       if (container) {
@@ -102,7 +102,7 @@ export default createComponent({
 
     useEventListener('scroll', onScroll, { target: scrollParent });
 
-    useVisibilityChange(rootRef, onScroll);
+    useVisibilityChange(root, onScroll);
 
     return () => {
       const { fixed, height } = state;
@@ -111,7 +111,7 @@ export default createComponent({
       };
 
       return (
-        <div ref={rootRef} style={rootStyle}>
+        <div ref={root} style={rootStyle}>
           <div class={bem({ fixed })} style={style.value}>
             {slots.default?.()}
           </div>
diff --git a/src/swipe-cell/index.js b/src/swipe-cell/index.js
index f4c9c62da..6d269bea1 100644
--- a/src/swipe-cell/index.js
+++ b/src/swipe-cell/index.js
@@ -34,7 +34,7 @@ export default createComponent({
     let lockClick;
     let startOffset;
 
-    const rootRef = ref();
+    const root = ref();
     const leftRef = ref();
     const rightRef = ref();
 
@@ -183,7 +183,7 @@ export default createComponent({
       close,
     });
 
-    useClickAway(rootRef, onClick, { eventName: 'touchstart' });
+    useClickAway(root, onClick, { eventName: 'touchstart' });
 
     return () => {
       const wrapperStyle = {
@@ -193,7 +193,7 @@ export default createComponent({
 
       return (
         <div
-          ref={rootRef}
+          ref={root}
           class={bem()}
           onClick={getClickHandler('cell')}
           onTouchstart={onTouchStart}