diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index c16a43af1e647a1d5f15661ba5716fedbb8e7b4c..f5c0776ca35f95026d1f49a69f11261d5c693aeb 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -331,6 +331,8 @@ export default {
       mrReviews: this.rehydratedMrReviews,
     });
 
+    this.interfaceWithDOM();
+
     if (this.endpointCodequality) {
       this.setCodequalityEndpoint(this.endpointCodequality);
     }
@@ -445,6 +447,16 @@ export default {
       notesEventHub.$off('refetchDiffData', this.refetchDiffData);
       notesEventHub.$off('fetchDiffData', this.fetchData);
     },
+    interfaceWithDOM() {
+      this.diffsTab = document.querySelector('.js-diffs-tab');
+    },
+    updateChangesTabCount() {
+      const badge = this.diffsTab.querySelector('.gl-badge');
+
+      if (this.diffsTab && badge) {
+        badge.textContent = this.diffFilesLength;
+      }
+    },
     navigateToDiffFileNumber(number) {
       this.navigateToDiffFileIndex(number - 1);
     },
@@ -461,7 +473,11 @@ export default {
       this.fetchDiffFilesMeta()
         .then(({ real_size }) => {
           this.diffFilesLength = parseInt(real_size, 10);
-          if (toggleTree) this.setTreeDisplay();
+          if (toggleTree) {
+            this.setTreeDisplay();
+          }
+
+          this.updateChangesTabCount();
         })
         .catch(() => {
           createFlash({
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 9487f9e73ac03f97c35e9a3f134a4da00da34c2d..d34848c801d8dc4c065682d94d65a16759696f99 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -39,7 +39,7 @@
               = tab_link_for @merge_request, :pipelines do
                 = _("Pipelines")
                 = gl_badge_tag @number_of_pipelines, { size: :sm }, { class: 'js-pipelines-mr-count' }
-          = render "projects/merge_requests/tabs/tab", name: "diffs", class: "diffs-tab", id: "diffs-tab", qa_selector: "diffs_tab" do
+          = render "projects/merge_requests/tabs/tab", name: "diffs", class: "diffs-tab js-diffs-tab", id: "diffs-tab", qa_selector: "diffs_tab" do
             = tab_link_for @merge_request, :diffs do
               = _("Changes")
               = gl_badge_tag @diffs_count, { size: :sm }