diff --git a/src/index-bar/README.md b/src/index-bar/README.md
index 1e4398f74..49d949b89 100644
--- a/src/index-bar/README.md
+++ b/src/index-bar/README.md
@@ -51,7 +51,7 @@ app.use(IndexAnchor);
 
 ```js
 export default {
-  data() {
+  setup() {
     return {
       indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
     };
diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md
index 0a2ffe214..8466e3f43 100644
--- a/src/index-bar/README.zh-CN.md
+++ b/src/index-bar/README.zh-CN.md
@@ -55,7 +55,7 @@ app.use(IndexAnchor);
 
 ```js
 export default {
-  data() {
+  setup() {
     return {
       indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
     };
diff --git a/src/index-bar/demo/index.vue b/src/index-bar/demo/index.vue
index 84cd38a41..d7476a69c 100644
--- a/src/index-bar/demo/index.vue
+++ b/src/index-bar/demo/index.vue
@@ -27,6 +27,8 @@
 </template>
 
 <script>
+import { ref } from 'vue';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -39,7 +41,8 @@ export default {
     },
   },
 
-  data() {
+  setup() {
+    const activeTab = ref(0);
     const indexList = [];
     const charCodeOfA = 'A'.charCodeAt(0);
 
@@ -48,7 +51,7 @@ export default {
     }
 
     return {
-      activeTab: 0,
+      activeTab,
       indexList,
       customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10],
     };