diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 46ed06fc3ab319b3c01cceb197bcfe4850d5cd37..253e1e3b70e84e9a79e5abb04bedb635291b2ac4 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -125,7 +125,7 @@ export default {
       required: false,
       default: '',
     },
-    mrReviews: {
+    rehydratedMrReviews: {
       type: Object,
       required: false,
       default: () => ({}),
@@ -164,6 +164,7 @@ export default {
       'canMerge',
       'hasConflicts',
       'viewDiffsFileByFile',
+      'mrReviews',
     ]),
     ...mapGetters('diffs', ['whichCollapsedTypes', 'isParallelView', 'currentDiffIndex']),
     ...mapGetters(['isNotesFetched', 'getNoteableData']),
@@ -268,7 +269,7 @@ export default {
       showSuggestPopover: this.showSuggestPopover,
       viewDiffsFileByFile: fileByFile(this.fileByFileUserPreference),
       defaultSuggestionCommitMessage: this.defaultSuggestionCommitMessage,
-      mrReviews: this.mrReviews || {},
+      mrReviews: this.rehydratedMrReviews,
     });
 
     if (this.shouldShow) {
@@ -513,7 +514,7 @@ export default {
               v-for="(file, index) in diffs"
               :key="file.newPath"
               :file="file"
-              :reviewed="fileReviews[index]"
+              :reviewed="fileReviews[file.id]"
               :is-first-file="index === 0"
               :is-last-file="index === diffFilesLength - 1"
               :help-page-path="helpPagePath"
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index f77c8d7406b01e84d1aed4f9acc0266e0d98b3a7..ca4543f7002b991285742b5b5a80e449be3ae3d5 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -150,6 +150,11 @@ export default {
     },
   },
   watch: {
+    'file.id': {
+      handler: function fileIdHandler() {
+        this.manageViewedEffects();
+      },
+    },
     'file.file_hash': {
       handler: function hashChangeWatch(newHash, oldHash) {
         this.isCollapsed = isCollapsed(this.file);
@@ -186,9 +191,7 @@ export default {
       this.postRender();
     }
 
-    if (this.reviewed && !this.isCollapsed && this.showLocalFileReviews) {
-      this.handleToggle();
-    }
+    this.manageViewedEffects();
   },
   beforeDestroy() {
     eventHub.$off(EVT_EXPAND_ALL_FILES, this.expandAllListener);
@@ -200,6 +203,11 @@ export default {
       'setRenderIt',
       'setFileCollapsedByUser',
     ]),
+    manageViewedEffects() {
+      if (this.reviewed && !this.isCollapsed && this.showLocalFileReviews) {
+        this.handleToggle();
+      }
+    },
     expandAllListener() {
       if (this.isCollapsed) {
         this.handleToggle();
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index 68fe204d955a50290efdb61a1bf7b0a53ad1c63a..87e9af174e5ab50ad6bff17cff8591c5c1cc05a8 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -124,7 +124,7 @@ export default function initDiffsApp(store) {
           showSuggestPopover: this.showSuggestPopover,
           fileByFileUserPreference: this.viewDiffsFileByFile,
           defaultSuggestionCommitMessage: this.defaultSuggestionCommitMessage,
-          mrReviews: getReviewsForMergeRequest(mrPath),
+          rehydratedMrReviews: getReviewsForMergeRequest(mrPath),
         },
       });
     },
diff --git a/app/assets/javascripts/diffs/utils/file_reviews.js b/app/assets/javascripts/diffs/utils/file_reviews.js
index 5fafc1714ae75caede2a58bfcc2d4b748dc40d6a..7a4b1aa6b17f5bece8665ebaba62cdae7efbf9f4 100644
--- a/app/assets/javascripts/diffs/utils/file_reviews.js
+++ b/app/assets/javascripts/diffs/utils/file_reviews.js
@@ -9,7 +9,12 @@ export function isFileReviewed(reviews, file) {
 }
 
 export function reviewStatuses(files, reviews) {
-  return files.map((file) => isFileReviewed(reviews, file));
+  return files.reduce((flat, file) => {
+    return {
+      ...flat,
+      [file.id]: isFileReviewed(reviews, file),
+    };
+  }, {});
 }
 
 export function getReviewsForMergeRequest(mrPath) {
diff --git a/changelogs/unreleased/tor-defect-file-viewed-reviews-convert-to-vuex.yml b/changelogs/unreleased/tor-defect-file-viewed-reviews-convert-to-vuex.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1d9fc46b875982ca914f7d8b35e6a4edc078c322
--- /dev/null
+++ b/changelogs/unreleased/tor-defect-file-viewed-reviews-convert-to-vuex.yml
@@ -0,0 +1,5 @@
+---
+title: Fix 'viewed' checkbox in single-file view mode
+merge_request: 55922
+author:
+type: fixed
diff --git a/spec/frontend/diffs/utils/file_reviews_spec.js b/spec/frontend/diffs/utils/file_reviews_spec.js
index a58c19a72455ae963643af2dc10e5ee1b502cfd5..230ec12409c65a13566c8ec1575fe7ae62616adb 100644
--- a/spec/frontend/diffs/utils/file_reviews_spec.js
+++ b/spec/frontend/diffs/utils/file_reviews_spec.js
@@ -49,11 +49,11 @@ describe('File Review(s) utilities', () => {
 
     it.each`
       mrReviews                         | files             | fileReviews
-      ${{}}                             | ${[file1, file2]} | ${[false, false]}
-      ${{ abc: ['123'] }}               | ${[file1, file2]} | ${[true, false]}
-      ${{ abc: ['098'] }}               | ${[file1, file2]} | ${[false, true]}
-      ${{ def: ['123'] }}               | ${[file1, file2]} | ${[false, false]}
-      ${{ abc: ['123'], def: ['098'] }} | ${[]}             | ${[]}
+      ${{}}                             | ${[file1, file2]} | ${{ 123: false, '098': false }}
+      ${{ abc: ['123'] }}               | ${[file1, file2]} | ${{ 123: true, '098': false }}
+      ${{ abc: ['098'] }}               | ${[file1, file2]} | ${{ 123: false, '098': true }}
+      ${{ def: ['123'] }}               | ${[file1, file2]} | ${{ 123: false, '098': false }}
+      ${{ abc: ['123'], def: ['098'] }} | ${[]}             | ${{}}
     `(
       'returns $fileReviews based on the diff files in state and the existing reviews $reviews',
       ({ mrReviews, files, fileReviews }) => {