feat(x-installer): update to vue3 and adapt x-installer (#1572)

* feat(x-installer): update to vue3 and adapt x-installer

* feat(x-installer): simplify internal createApp fn

* feat(scroll): fix import path

* feat(component): keep injector const export

* feat(mixins): removing deprecated mixins

packages/x-components/package.json

@@ -82,19 +82,15 @@
     "js-md5": "^0.8.3",
     "rxjs": "~7.8.0",
     "tslib": "~2.6.0",
-    "vue-class-component": "~7.2.6",
-    "vue-global-events": "~1.2.1",
-    "vue-property-decorator": "~8.5.0",
-    "vue-runtime-helpers": "~1.1.2"
+    "vue-global-events": "~3.0.1"
   },
   "peerDependencies": {
-    "vue": "~2.7.0",
-    "vuex": "^3.0.0"
+    "vue": "~3.4.31",
+    "vuex": "4.0.2"
   },
   "devDependencies": {
     "@badeball/cypress-cucumber-preprocessor": "~20.0.0",
     "@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
-    "@cypress/vue2": "~2.0.1",
     "@empathyco/x-tailwindcss": "^1.2.0-alpha.3",
     "@microsoft/api-documenter": "~7.23.0",
     "@microsoft/api-extractor": "~7.39.0",
@@ -105,9 +101,8 @@
     "@types/jest": "~27.5.0",
     "@types/node": "~18.19.0",
     "@types/testing-library__jest-dom": "~5.14.5",
-    "@vitejs/plugin-vue2": "^2.2.0",
-    "@vue/test-utils": "~1.0.3",
-    "@vue/vue2-jest": "~27.0.0-alpha.3",
+    "@vitejs/plugin-vue": "~5.0.5",
+    "@vue/test-utils": "~2.4.6",
     "autoprefixer": "~10.4.4",
     "convert-source-map": "~2.0.0",
     "cypress": "~13.6.0",
@@ -132,12 +127,11 @@
     "ts-node": "~10.9.1",
     "typescript": "~4.9.4",
     "vite": "^4.5.0",
-    "vite-plugin-vue-inspector": "^4.0.0",
-    "vue": "~2.7.14",
-    "vue-docgen-cli": "~4.67.0",
-    "vue-router": "~3.6.5",
-    "vue-template-compiler": "~2.7.14",
-    "vuex": "~3.6.2"
+    "vite-plugin-vue-inspector": "~5.1.2",
+    "vue": "~3.4.31",
+    "vue-docgen-cli": "~4.79.0",
+    "vue-router": "~4.4.0",
+    "vuex": "4.0.2"
   },
   "publishConfig": {
     "access": "public",

packages/x-components/src/App.vue

@@ -10,10 +10,6 @@
   </div>
 </template>
 
-<script>
-  export default {};
-</script>
-
 <style lang="scss">
   html,
   body {

packages/x-components/src/components/column-picker/base-column-picker-list.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="x-column-picker-list x-button-group" data-test="column-picker-list" role="list">
-    <template v-for="({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses">
+    <template
+      v-for="({ column, cssClasses, events, isSelected }, index) in columnsWithCssClasses"
+      :key="column"
+    >
       <BaseEventButton
-        :key="column"
         class="x-column-picker-list__button x-button"
         :class="[buttonClass, cssClasses]"
         data-test="column-picker-button"