diff --git a/src/renderer/components/material/Pagination.vue b/src/renderer/components/material/Pagination.vue
index 7e6f1beb..b33a87de 100644
--- a/src/renderer/components/material/Pagination.vue
+++ b/src/renderer/components/material/Pagination.vue
@@ -51,6 +51,7 @@
 </template>
 
 <script>
+import { computed } from '@common/utils/vueTools'
 
 export default {
   props: {
@@ -72,29 +73,34 @@ export default {
     },
   },
   emits: ['btn-click'],
-  computed: {
-    maxPage() {
-      return Math.ceil(this.count / this.limit) || 1
-    },
-    pageEvg() {
-      return Math.floor(this.btnLength / 2)
-    },
-    pages() {
-      if (this.maxPage <= this.btnLength) return Array.from({ length: this.maxPage }, (_, i) => i + 1)
-      let start =
-        this.page - this.pageEvg > 1
-          // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-          ? this.maxPage - this.page < this.pageEvg + 1
-            ? this.maxPage - (this.btnLength - 1)
-            : this.page - this.pageEvg
-          : 1
-      return Array.from({ length: this.btnLength }, (_, i) => start + i)
-    },
-  },
-  methods: {
-    handleClick(page) {
-      this.$emit('btn-click', page)
-    },
+  setup(props, { emit }) {
+    const maxPage = computed(() => {
+      return Math.ceil(props.count / props.limit) || 1
+    })
+    const pageEvg = computed(() => {
+      return Math.floor(props.btnLength / 2)
+    })
+    const pages = computed(() => {
+      if (maxPage <= props.btnLength) return Array.from({ length: maxPage }, (_, i) => i + 1)
+      let start = props.page - pageEvg > 1
+        // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+        ? maxPage - props.page < pageEvg + 1
+          ? maxPage - (props.btnLength - 1)
+          : props.page - pageEvg
+        : 1
+      return Array.from({ length: props.btnLength }, (_, i) => start + i)
+    })
+
+    const handleClick = (page) => {
+      emit('btn-click', page)
+    }
+
+    return {
+      maxPage,
+      pageEvg,
+      pages,
+      handleClick,
+    }
   },
 }
 </script>
diff --git a/src/renderer/components/material/SearchInput.vue b/src/renderer/components/material/SearchInput.vue
index 921ef08d..84afa7d3 100644
--- a/src/renderer/components/material/SearchInput.vue
+++ b/src/renderer/components/material/SearchInput.vue
@@ -120,6 +120,7 @@ export default {
     handleRegisterEvent(action) {
       let eventHub = window.key_event
       let name = action == 'on' ? 'on' : 'off'
+      // eslint-disable-next-line @typescript-eslint/unbound-method
       eventHub[name](HOTKEY_COMMON.focusSearchInput.action, this.handleFocusInput)
     },
     handleFocusInput() {