Final updates. Add v-model and data object.

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

@@ -6,19 +6,23 @@
             <span v-if="!isRequired" class="fw-normal ms-1">(Optional)</span>
         </div>
         <textarea
-        v-model="text"
+            v-model="value"
-        @keyup="updateCount"
+            @keyup="updateCount"
-        id="textarea-comments"
+            id="textarea-comments"
-        class="p-4"
+            class="p-4"
-        :maxlength="maxLength"
+            :maxlength="maxLength"
-        role="textbox"
+            role="textbox"
-        aria-multiline="true"
+            aria-multiline="true"
-        :aria-required="isRequired">
+            :aria-required="isRequired">
-    </textarea>
+        </textarea>
-    <p tabindex="0" class="caption mt-2 mb-0" id="charactersremaining" :style="{ color: countdownColor }">
+        <p
-        {{ remainingCount }}/{{ maxLength }} characters remaining
+            tabindex="0"
-    </p>
+            class="caption mt-2 mb-0"
-</div>
+            id="charactersremaining"
+            :style="{ color: countdownColor }">
+            {{ remainingCount }}/{{ maxLength }} characters remaining
+        </p>
+    </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;
 
@@ -47,11 +46,11 @@ export default {
 
         switch (typeof modelValue) {
             case "number":
-            initialValue = modelValue;
+                initialValue = modelValue;
-            break;
+                break;
             default:
-            initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
+                initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
-            break;
+                break;
         }
 
         const fieldOptions = {
@@ -73,18 +72,19 @@ 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");