diff --git a/openlibrary/components/MergeUI/MergeTable.vue b/openlibrary/components/MergeUI/MergeTable.vue
index 23ee82eedb6..c2d9a7f7493 100644
--- a/openlibrary/components/MergeUI/MergeTable.vue
+++ b/openlibrary/components/MergeUI/MergeTable.vue
@@ -44,13 +44,9 @@
 <script>
 /* eslint no-console: 0 */
 import _ from 'lodash';
-import Vue from 'vue';
-import AsyncComputed from 'vue-async-computed';
 import MergeRow from './MergeRow.vue';
 import { merge, get_editions, get_lists, get_bookshelves, get_ratings } from './utils.js';
 
-Vue.use(AsyncComputed);
-
 /**
  * @param {string} olid
  */
@@ -73,11 +69,38 @@ export default {
     components: {
         MergeRow
     },
+    async created(){
+        // using await in created won't block the Vue lifecycle, just the rest of this function
+        await this.fetchAndSetRecords();
+        // After fetching records, we fetch all other fields we need
+        this.fetchAndSetBookshelves();
+        this.fetchAndSetEditions();
+        this.fetchAndSetLists();
+        this.fetchAndSetRatings();
+    },
     data() {
         return {
-            master_key: null,
-            /** @type {{[key: string]: Boolean}} */
-            selected: []
+            records: {
+                type: Array,
+                default: () => [],
+            },
+            // The following are all objects with the record key as the key and response as the value
+            bookshelves: {
+                type: Object,
+                default: () => null,
+            },
+            editions: {
+                type: Object,
+                default: () => null,
+            },
+            lists: {
+                type: Object,
+                default: () => null,
+            },
+            ratings: {
+                type: Object,
+                default: () => null,
+            },
         };
     },
     props: {
@@ -85,8 +108,15 @@ export default {
         show_diffs: Boolean,
         primary: String
     },
-    asyncComputed: {
-        async records() {
+    methods: {
+        isCellUsed(record, field) {
+            if (!this.merge) return false;
+            return field in this.merge.sources
+                ? this.merge.sources[field].includes(record.key)
+                : record.key === this.master_key;
+        },
+        async fetchAndSetRecords(){
+            // gets records from api and sets them
             const olids_sorted = _.sortBy(this.olids, olid =>
                 parseFloat(olid.match(/\d+/)[0])
             );
@@ -95,114 +125,63 @@ export default {
                 await Promise.all(olids_sorted.map(fetchRecord)),
                 record => record.type.key, 'desc');
 
-            let masterIndex = 0
-            if (this.primary) {
-                const primaryKey = `/works/${this.primary}`
-                masterIndex = records.findIndex(elem => elem.key === primaryKey)
-            }
-
-            this.master_key = records[masterIndex].key
-            this.selected = _.fromPairs(records.map(record => [record.key, record.type.key.includes('work')]));
-
-            return records;
+            this.records = records;
         },
-
-        async editions() {
-            if (!this.records) return null;
-
-            const editionPromises = await Promise.all(
-                this.records.map(r => r.type.key.includes('work') ? get_editions(r.key) : {size: 0})
-            );
-            const editions = editionPromises.map(p => p.value || p);
-            const editionsMap = _.fromPairs(
-                this.records.map((work, i) => [work.key, editions[i]])
-            );
+        async fetchAndSetBookshelves() {this.bookshelves = await this.fetchData(get_bookshelves)},
+        async fetchAndSetEditions() {
+            const editionsMap = await this.fetchData(get_editions, { size: 0 });
 
             // If any of the records are editions, insert the record as its own edition list
             Object.keys(editionsMap).forEach((key, index) => {
                 if (key.includes('M')) editionsMap[key] = {size: 1, entries: [this.records[index]]};
             });
 
-            return editionsMap;
+            this.editions = editionsMap;
         },
-
-        async lists() {
-            if (!this.records) return null;
-
-            // We only need the count, so set limit=0 (waaaay faster!)
-            const promises = await Promise.all(
-                this.records.map(r => (r.type.key === '/type/work') ? get_lists(r.key, 0) : {})
-            );
-            const responses = promises.map(p => p.value || p);
-            return _.fromPairs(
-                this.records.map((work, i) => [work.key, responses[i]])
-            );
+        async fetchAndSetLists() {
+            // TODO: we can simplify if we set the default to zero in get_lists
+            this.lists = await this.fetchData((r) => get_lists(r, 0));
         },
-        async bookshelves() {
-            if (!this.records) return null;
+        async fetchAndSetRatings() {this.ratings = await this.fetchData(get_ratings)},
+        async fetchData(getter, defaultValue = {}){
+            /*
+              If recordsExist, for each work call the getter and then return a dict with
+                 1. the record key as the key
+                 2. the response as the value
+                 3. the default value if the type isn't a work
+            */
+            if (!this.recordsExist) return null;
 
             const promises = await Promise.all(
-                this.records.map(r => (r.type.key === '/type/work') ? get_bookshelves(r.key) : {})
-            );
-            const responses = promises.map(p => p.value || p);
-            return _.fromPairs(
-                this.records.map((work, i) => [work.key, responses[i]])
+                this.records.map(r => (r.type.key === '/type/work') ? getter(r.key) : defaultValue)
             );
-        },
 
-        async ratings() {
-            if (!this.records) return null;
-
-            const promises = await Promise.all(
-                this.records.map(r => (r.type.key === '/type/work') ? get_ratings(r.key) : {})
-            );
             const responses = promises.map(p => p.value || p);
             return _.fromPairs(
                 this.records.map((work, i) => [work.key, responses[i]])
             );
         },
-
-        async merge() {
-            if (!this.master_key || !this.records || !this.editions)
-                return undefined;
-
-            const master = this.records.find(r => r.key === this.master_key);
-            const all_dupes = this.records
-                .filter(r => this.selected[r.key])
-                .filter(r => r.key !== this.master_key);
-            const dupes = all_dupes.filter(r => r.type.key === '/type/work');
-            const records = [master, ...all_dupes];
-            const editions_to_move = _.flatMap(
-                all_dupes,
-                work => this.editions[work.key].entries
-            );
-
-            const [record, sources] = merge(master, dupes);
-
-            const extras = {
-                edition_count: _.sum(records.map(r => this.editions[r.key].size)),
-                list_count: (this.lists) ? _.sum(records.map(r => this.lists[r.key].size)) : null
-            };
-
-            const unmergeable_works = this.records
-                .filter(work => work.type.key === '/type/work' &&
-                this.selected[work.key] &&
-                work.key !== this.master_key &&
-                this.editions[work.key].entries.length < this.editions[work.key].size)
-                .map(r => r.key);
-
-            return { record, sources, ...extras, dupes, editions_to_move, unmergeable_works };
-        }
-    },
-    methods: {
-        isCellUsed(record, field) {
-            if (!this.merge) return false;
-            return field in this.merge.sources
-                ? this.merge.sources[field].includes(record.key)
-                : record.key === this.master_key;
-        }
     },
     computed: {
+        recordsExist(){
+            return this.records && this.records.length > 0;
+        },
+        selected(){
+            /** @type {{[key: string]: Boolean}} */
+            if (!this.recordsExist) return []
+            return _.fromPairs(this.records.map(record => [record.key, record.type.key.includes('work')]));
+        },
+        master_key(){
+            if (!this.recordsExist) return null
+
+            let masterIndex = 0;
+            if (this.primary) {
+                const primaryKey = `/works/${this.primary}`
+                masterIndex = this.records.findIndex(elem => elem.key === primaryKey)
+            }
+
+            return this.records[masterIndex].key
+        },
         fields() {
             const at_start = ['covers'];
             const together = ['key', 'title', 'subtitle', 'authors', 'error'];
@@ -257,6 +236,37 @@ export default {
                 ...usedTextData,
                 ...otherFields
             ];
+        },
+        merge(){
+            if (!this.master_key || !this.recordsExist || !this.editions)
+                return undefined;
+
+            const master = this.records.find(r => r.key === this.master_key);
+            const all_dupes = this.records
+                .filter(r => this.selected[r.key])
+                .filter(r => r.key !== this.master_key);
+            const dupes = all_dupes.filter(r => r.type.key === '/type/work');
+            const records = [master, ...all_dupes];
+            const editions_to_move = _.flatMap(
+                all_dupes,
+                work => this.editions[work.key].entries
+            );
+
+            const [record, sources] = merge(master, dupes);
+
+            const extras = {
+                edition_count: _.sum(records.map(r => this.editions[r.key].size)),
+                list_count: (this.lists) ? _.sum(records.map(r => this.lists[r.key].size)) : null
+            };
+
+            const unmergeable_works = this.records
+                .filter(work => work.type.key === '/type/work' &&
+                this.selected[work.key] &&
+                work.key !== this.master_key &&
+                this.editions[work.key].entries.length < this.editions[work.key].size)
+                .map(r => r.key);
+
+            return { record, sources, ...extras, dupes, editions_to_move, unmergeable_works };
         }
     }
 };
diff --git a/package-lock.json b/package-lock.json
index 1866e0793d7..c013701b0e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -64,7 +64,6 @@
         "svgo": "2.3.1",
         "tesseract.js": "4.1.1",
         "vue": "^2.7.0",
-        "vue-async-computed": "3.9.0",
         "vue-loader": "^15.10.0",
         "vue-multiselect": "2.1.6",
         "webpack": "^5.88.2",
@@ -32581,14 +32580,6 @@
         "csstype": "^3.1.0"
       }
     },
-    "node_modules/vue-async-computed": {
-      "version": "3.9.0",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "vue": "~2"
-      }
-    },
     "node_modules/vue-codemod": {
       "version": "0.0.5",
       "dev": true,
diff --git a/package.json b/package.json
index 51aecd4ee28..0754683e2e1 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,6 @@
     "svgo": "2.3.1",
     "tesseract.js": "4.1.1",
     "vue": "^2.7.0",
-    "vue-async-computed": "3.9.0",
     "vue-loader": "^15.10.0",
     "vue-multiselect": "2.1.6",
     "webpack": "^5.88.2",