Rewrote "render math" toggle button logic

In particular, the mounted hook that caused the math to rerender when a comment
was added has been removed. The button now only controls a boolean and the
actual rendering and resetting is handled by a watcher on the boolean, making it
less likely for the two to get out of sync.

frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionTopToolbar.vue

@@ -24,17 +24,8 @@
     <v-spacer />
     <toggle-feedback-visibility-button />
     <div v-if="isMarkdown">
-      <v-btn
-        v-if="!mathIsRendered"
-        @click="renderAsciiMath"
-      >
-        Render Math
-      </v-btn>
-      <v-btn
-        v-else
-        @click="resetSubmission"
-      >
-        Reset Math
+      <v-btn @click="mathIsRendered = !mathIsRendered">
+        {{ mathIsRendered ? 'Reset Math' : 'Render Math' }}
       </v-btn>
     </div>
     <v-spacer />
@@ -197,8 +188,7 @@ export default {
       copyMessage: 'Copy to clipboard',
       originalSubmissionDialog: false,
       originalSubmission: '',
-      mathIsRendered: false,
-      mathRerender: 0
+      mathIsRendered: this.isMarkdown,
     }
   },
   computed: {
@@ -206,6 +196,17 @@ export default {
       return UI.state.showSubmissionType === false
     }
   },
+  watch: {
+    mathIsRendered: {
+      immediate: true,
+      handler(newValue) {
+        if (newValue)
+          this.renderAsciiMath()
+        else
+          this.resetSubmission()
+      }
+    }
+  },
   created () {
     subNotesEventBus.$on('submissionChanged', () => {
       if (this.mathIsRendered) {
@@ -215,18 +216,11 @@ export default {
       }
     })
   },
-  mounted () {
-    if (this.isMarkdown) {
-      this.renderAsciiMath()
-    }
-  },
   methods: {
     renderAsciiMath () {
       window.MathJax.typeset()
-      this.mathIsRendered = true
     },
     resetSubmission () {
-      this.mathIsRendered = false
       subNotesEventBus.$emit('resetSubmission')
     },
     async showOriginalSubmission () {