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/dashboard/components/ui/ContextMenu.vue

@@ -1,43 +1,38 @@
-<script>
-export default {
-  props: {
-    x: {
-      type: Number,
-      default: 0,
-    },
-    y: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      left: this.x,
-      top: this.y,
-      show: false,
-    };
-  },
-  computed: {
-    style() {
-      return {
-        top: this.top + 'px',
-        left: this.left + 'px',
-      };
-    },
-  },
-  mounted() {
-    this.$nextTick(() => this.$el.focus());
-  },
-};
+<script setup>
+import { ref, computed, onMounted, nextTick, defineEmits } from 'vue';
+
+const { x, y } = defineProps({
+  x: { type: Number, default: 0 },
+  y: { type: Number, default: 0 },
+});
+const emit = defineEmits(['close']);
+
+const left = ref(x);
+const top = ref(y);
+
+const style = computed(() => ({
+  top: top.value + 'px',
+  left: left.value + 'px',
+}));
+
+const target = ref();
+onMounted(() => {
+  nextTick(() => {
+    target.value.focus();
+  });
+});
 </script>
 
 <template>
-  <div
-    class="fixed outline-none z-[9999] cursor-pointer"
-    :style="style"
-    tabindex="0"
-    @blur="$emit('close')"
-  >
-    <slot />
-  </div>
+  <Teleport to="body">
+    <div
+      ref="target"
+      class="fixed outline-none z-[9999] cursor-pointer"
+      :style="style"
+      tabindex="0"
+      @blur="emit('close')"
+    >
+      <slot />
+    </div>
+  </Teleport>
 </template>