feat: Vite + vue 3 💚 (#10047)

Fixes https://github.com/chatwoot/chatwoot/issues/8436
Fixes https://github.com/chatwoot/chatwoot/issues/9767
Fixes https://github.com/chatwoot/chatwoot/issues/10156
Fixes https://github.com/chatwoot/chatwoot/issues/6031
Fixes https://github.com/chatwoot/chatwoot/issues/5696
Fixes https://github.com/chatwoot/chatwoot/issues/9250
Fixes https://github.com/chatwoot/chatwoot/issues/9762

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/shared/components/TextArea.vue

@@ -9,7 +9,7 @@ export default {
       type: String,
       default: '',
     },
-    value: {
+    modelValue: {
       type: [String, Number],
       required: true,
     },
@@ -18,9 +18,14 @@ export default {
       default: '',
     },
   },
-  methods: {
-    onChange(event) {
-      this.$emit('input', event.target.value);
+  computed: {
+    computedModel: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit('update:modelValue', value);
+      },
     },
   },
 };
@@ -39,6 +44,7 @@ export default {
       {{ label }}
     </div>
     <textarea
+      v-model="computedModel"
       class="w-full px-3 py-2 leading-tight border rounded outline-none resize-none text-slate-700"
       :class="{
         'border-black-200 hover:border-black-300 focus:border-black-300':
@@ -46,8 +52,6 @@ export default {
         'border-red-200 hover:border-red-300 focus:border-red-300': error,
       }"
       :placeholder="placeholder"
-      :value="value"
-      @change="onChange"
     />
     <div v-if="error" class="mt-2 text-xs font-medium text-red-400">
       {{ error }}