1 files changed, 13 insertions, 1 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
index 5ee51764555..c86f16e0254 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
@@ -2,8 +2,8 @@
 import Vue from 'vue';
 import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { __ } from '~/locale';
-import SuggestionDiff from './suggestion_diff.vue';
 import { deprecatedCreateFlash as Flash } from '~/flash';
+import SuggestionDiff from './suggestion_diff.vue';
 
 export default {
   directives: {
@@ -64,6 +64,11 @@ export default {
   mounted() {
     this.renderSuggestions();
   },
+  beforeDestroy() {
+    if (this.suggestionsWatch) {
+      this.suggestionsWatch();
+    }
+  },
   methods: {
     renderSuggestions() {
       // swaps out suggestion(s) markdown with rich diff components
@@ -108,6 +113,13 @@ export default {
         },
       });
 
+      // We're using `$watch` as `suggestionsCount` updates do not
+      // propagate to this component for some unknown reason while
+      // using a traditional prop watcher.
+      this.suggestionsWatch = this.$watch('suggestionsCount', () => {
+        suggestionDiff.suggestionsCount = this.suggestionsCount;
+      });
+
       suggestionDiff.$on('apply', ({ suggestionId, callback, message }) => {
         this.$emit('apply', { suggestionId, callback, flashContainer: this.$el, message });
       });