Reduce complexity of discussionTabCounter eval

The tab counter for discussion relies on 2
variables: discussionTabCounter _and_ isLoading.
In order to effectively watch both of these
properties, an additional computed value has
been created, which is subsequently watched.

This removes the dependency of allDiscussions
from discussionTabCounter

app/assets/javascripts/notes/components/notes_app.vue

 <script>
-import { __ } from '~/locale';
 import { mapGetters, mapActions } from 'vuex';
+import { __ } from '~/locale';
 import { getLocationHash, doesHashExistInUrl } from '../../lib/utils/url_utility';
 import Flash from '../../flash';
 import * as constants from '../constants';
@@ -71,6 +71,9 @@ export default {
       'userCanReply',
       'discussionTabCounter',
     ]),
+    discussionTabCounterText() {
+      return this.isLoading ? '' : this.discussionTabCounter;
+    },
     noteableType() {
       return this.noteableData.noteableType;
     },
@@ -95,9 +98,9 @@ export default {
         this.fetchNotes();
       }
     },
-    allDiscussions() {
-      if (this.discussionsCount && !this.isLoading) {
-        this.discussionsCount.textContent = this.discussionTabCounter;
+    discussionTabCounterText(val) {
+      if (this.discussionsCount) {
+        this.discussionsCount.textContent = val;
       }
     },
   },

spec/frontend/notes/components/note_app_spec.js

 import $ from 'helpers/jquery';
 import AxiosMockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
 import Vue from 'vue';
 import { mount, createLocalVue } from '@vue/test-utils';
+import { setTestTimeout } from 'helpers/timeout';
+import axios from '~/lib/utils/axios_utils';
 import NotesApp from '~/notes/components/notes_app.vue';
 import service from '~/notes/services/notes_service';
 import createStore from '~/notes/stores';
 import '~/behaviors/markdown/render_gfm';
-import { setTestTimeout } from 'helpers/timeout';
 // TODO: use generated fixture (https://gitlab.com/gitlab-org/gitlab-foss/issues/62491)
 import * as mockData from '../../notes/mock_data';
 import * as urlUtility from '~/lib/utils/url_utility';
@@ -77,6 +77,8 @@ describe('note_app', () => {
 
   describe('set data', () => {
     beforeEach(() => {
+      setFixtures('<div class="js-discussions-count"></div>');
+
       axiosMock.onAny().reply(200, []);
       wrapper = mountComponent();
       return waitForDiscussionsRequest();
@@ -97,6 +99,10 @@ describe('note_app', () => {
     it('should fetch discussions', () => {
       expect(store.state.discussions).toEqual([]);
     });
+
+    it('updates discussions badge', () => {
+      expect(document.querySelector('.js-discussions-count').textContent).toEqual('0');
+    });
   });
 
   describe('render', () => {
@@ -161,6 +167,7 @@ describe('note_app', () => {
 
   describe('while fetching data', () => {
     beforeEach(() => {
+      setFixtures('<div class="js-discussions-count"></div>');
       axiosMock.onAny().reply(200, []);
       wrapper = mountComponent();
     });
@@ -177,6 +184,10 @@ describe('note_app', () => {
         'Write a comment or drag your files here…',
       );
     });
+
+    it('should not update discussions badge (it should be blank)', () => {
+      expect(document.querySelector('.js-discussions-count').textContent).toEqual('');
+    });
   });
 
   describe('update note', () => {