Remove unnecessary intermediate local state

app/assets/javascripts/diffs/components/settings_dropdown.vue

@@ -14,26 +14,10 @@ export default {
     GlDropdown,
     GlFormCheckbox,
   },
-  data() {
-    return {
-      checked: false,
-    };
-  },
   computed: {
     ...mapGetters('diffs', ['isInlineView', 'isParallelView']),
     ...mapState('diffs', ['renderTreeList', 'showWhitespace', 'viewDiffsFileByFile']),
   },
-  watch: {
-    viewDiffsFileByFile() {
-      this.checked = this.viewDiffsFileByFile;
-    },
-    checked() {
-      eventHub.$emit(EVT_VIEW_FILE_BY_FILE, { setting: this.checked });
-    },
-  },
-  created() {
-    this.checked = this.viewDiffsFileByFile;
-  },
   methods: {
     ...mapActions('diffs', [
       'setInlineDiffViewType',
@@ -110,7 +94,12 @@ export default {
       </label>
     </div>
     <div class="gl-mt-3 gl-px-3">
-      <gl-form-checkbox v-model="checked" data-testid="file-by-file" class="gl-mb-0">
+      <gl-form-checkbox
+        data-testid="file-by-file"
+        class="gl-mb-0"
+        :checked="viewDiffsFileByFile"
+        @input="toggleFileByFile"
+      >
         {{ $options.i18n.fileByFile }}
       </gl-form-checkbox>
     </div>

spec/frontend/diffs/components/settings_dropdown_spec.js

@@ -181,7 +181,7 @@ describe('Diff settings dropdown component', () => {
       ${true}    | ${true}
       ${false}   | ${false}
     `(
-      'sets { checked: $checked } if the fileByFile setting is $fileByFile',
+      'sets the checkbox to { checked: $checked } if the fileByFile setting is $fileByFile',
       async ({ fileByFile, checked }) => {
         createComponent(store => {
           Object.assign(store.state.diffs, {
@@ -191,7 +191,7 @@ describe('Diff settings dropdown component', () => {
 
         await vm.$nextTick();
 
-        expect(vm.checked).toBe(checked);
+        expect(getFileByFileCheckbox(wrapper).element.checked).toBe(checked);
       },
     );