Final updates. Add v-model and data object.

src/digital-components/textarea-question/textarea-question.vue

@@ -6,7 +6,7 @@
             <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
         </div>
         <textarea
-        v-model="text"
+            v-model="value"
             @keyup="updateCount"
             id="textarea-comments"
             class="p-4"
@@ -15,10 +15,14 @@
             aria-multiline="true"
             :aria-required="isRequired">
         </textarea>
-    <p tabindex="0" class="caption mt-2 mb-0" id="charactersremaining" :style="{ color: countdownColor }">
+        <p
+            tabindex="0"
+            class="caption mt-2 mb-0"
+            id="charactersremaining"
+            :style="{ color: countdownColor }">
             {{ remainingCount }}/{{ maxLength }} characters remaining
         </p>
-</div>
+    </div>
 </template>
 
 <script>
@@ -29,15 +33,10 @@ export default {
         isRequired: Boolean,
         maxLength: {
             type: Number,
-            default: 250
+            default: 250,
         },
         modelValue: String,
     },
-    data() {
-        return {
-            text: ''
-        };
-    },
     setup(props) {
         const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
 
@@ -73,19 +72,20 @@ export default {
             },
         },
         remainingCount() {
-            return this.maxLength - this.text.length;
+            return this.maxLength - this.value.length;
         },
         countdownColor() {
-            return this.remainingCount <= (this.maxLength * 0.1) ? 'red' : '';
+            // Chanage text color to red when 10% of max remain
-        }
+            return this.remainingCount <= this.maxLength * 0.1 ? "red" : "";
+        },
     },
     methods: {
         updateCount() {
-            if (this.text.length > this.maxLength) {
+            if (this.value.length > this.maxLength) {
-                this.text = this.text.slice(0, this.maxLength);
+                this.value = this.value.slice(0, this.maxLength);
-            }
             }
         },
+    },
 };
 </script>
 

src/layouts/customer-details/customer-details.vue

@@ -1,5 +1,5 @@
 <template>
-    <textareaquestion cmsWidgetName="TextAreaContentWidget" maxLength="250" />
+    <textareaquestion v-model="techNotes" cmsWidgetName="TextAreaContentWidget" maxLength="250" />
 </template>
 
 <script>
@@ -33,6 +33,11 @@ export default {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
+    data() {
+        return {
+            techNotes: "",
+        };
+    },
     computed: {
         textAreaLabelCopy() {
             return this.getCmsContent("TextAreaContentWidget", "QuestionText");