Update the collapse state when the file changes, too

When the file loads, it's collapsed automatically
if the user has reviewed it already.

Unfortunately, this only happens when the component
mounts.

To make the component reactive - specifically in
file-by-file mode - we add the check for the collapse
state into a watcher on the file ID.

Critically, we leave the `mounted` check in place, too.
The first time the component is mounted, it has the
initial file already present - the watcher won't trigger
on that first render.

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();