Resolve "Design discussion note preview is broken"

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -79,6 +79,12 @@ export default {
       required: false,
       default: false,
     },
+    // This prop is used as a fallback in case if textarea.elm is undefined
+    textareaValue: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -183,7 +189,7 @@ export default {
           Can't use `$refs` as the component is technically in the parent component
           so we access the VNode & then get the element
         */
-      const text = this.$slots.textarea[0].elm.value;
+      const text = this.$slots.textarea[0]?.elm?.value || this.textareaValue;
 
       if (text) {
         this.markdownPreviewLoading = true;

changelogs/unreleased/201761-design-discussion-note-preview-is-broken.yml

+---
+title: Resolve Design discussion note preview is broken
+merge_request: 24288
+author:
+type: fixed

ee/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue

@@ -53,6 +53,7 @@ export default {
       :markdown-preview-path="markdownPreviewPath"
       :can-attach-file="false"
       :enable-autocomplete="false"
+      :textarea-value="value"
       markdown-docs-path="/help/user/markdown"
       class="bordered-box"
     >