diff --git a/.eslintrc b/.eslintrc
index 5fb449d3..5e65d39e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -7,7 +7,7 @@
     "extends": [
         "standard",
         "plugin:@typescript-eslint/recommended",
-        "plugin:vue/recommended"
+        "plugin:vue/vue3-recommended"
     ],
     "parser": "vue-eslint-parser",
     "parserOptions": {
@@ -17,6 +17,7 @@
         "requireConfigFile": false
     },
     "plugins": [
+        "vue",
         "@typescript-eslint"
     ],
     "rules": {
diff --git a/package.json b/package.json
index 7219afad..20f0f2d3 100644
--- a/package.json
+++ b/package.json
@@ -109,13 +109,13 @@
     "@mdi/font": "^6.1.95",
     "@turf/helpers": "^6.5.0",
     "@vscode/vscode-languagedetection": "^1.0.21",
+    "@vue/compat": "^3.2.33",
     "ace-builds": "^1.4.13",
     "better-sqlite3": "^7.5.0",
     "electron-log": "^4.4.1",
     "electron-store": "^8.0.1",
     "electron-updater": "^4.6.1",
     "electron-window-state": "^5.0.3",
-    "faker": "^5.5.3",
     "leaflet": "^1.7.1",
     "marked": "^4.0.0",
     "moment": "^2.29.1",
@@ -128,9 +128,10 @@
     "sql-formatter": "^4.0.2",
     "ssh2-promise": "^1.0.2",
     "v-mask": "^2.3.0",
-    "vue-i18n": "^8.26.5",
-    "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2"
+    "vue": "^3.2.33",
+    "vue-i18n": "^9.1.9",
+    "vuedraggable": "^4.1.0",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.15.7",
@@ -141,6 +142,7 @@
     "@types/pg": "^8.6.5",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
+    "@vue/compiler-sfc": "^3.2.33",
     "all-contributors-cli": "^6.20.0",
     "babel-loader": "^8.2.3",
     "chalk": "^4.1.2",
@@ -172,10 +174,8 @@
     "tree-kill": "^1.2.2",
     "ts-loader": "^9.2.8",
     "typescript": "^4.6.3",
-    "vue": "^2.6.14",
     "vue-eslint-parser": "^8.3.0",
-    "vue-loader": "^15.9.8",
-    "vue-template-compiler": "^2.6.14",
+    "vue-loader": "^16.8.3",
     "webpack": "^5.60.0",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.4.0"
diff --git a/scripts/devRunner.js b/scripts/devRunner.js
index f50f8d6a..cbd24241 100644
--- a/scripts/devRunner.js
+++ b/scripts/devRunner.js
@@ -19,7 +19,7 @@ let manualRestart = null;
 const remoteDebugging = process.argv.includes('--remote-debug');
 
 if (remoteDebugging) {
-   // disable dvtools open in electron
+   // disable devtools open in electron
    process.env.RENDERER_REMOTE_DEBUGGING = true;
 }
 
diff --git a/src/main/main.ts b/src/main/main.ts
index 563b66c6..debc22e6 100644
--- a/src/main/main.ts
+++ b/src/main/main.ts
@@ -109,8 +109,8 @@ else {
       mainWindow = await createMainWindow();
       createAppMenu();
 
-      // if (isDevelopment)
-      //    mainWindow.webContents.openDevTools();
+      if (isDevelopment)
+         mainWindow.webContents.openDevTools();
 
       process.on('uncaughtException', error => {
          mainWindow.webContents.send('unhandled-exception', error);
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 698e6541..7a0f7083 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -25,25 +25,24 @@
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue';
 import { mapActions, mapGetters } from 'vuex';
 import { ipcRenderer } from 'electron';
 import { Menu, getCurrentWindow } from '@electron/remote';
+import TheSettingBar from '@/components/TheSettingBar';
 
 export default {
    name: 'App',
    components: {
-      TheTitleBar: () => import(/* webpackChunkName: "TheTitleBar" */'@/components/TheTitleBar'),
-      TheSettingBar: () => import(/* webpackChunkName: "TheSettingBar" */'@/components/TheSettingBar'),
-      TheFooter: () => import(/* webpackChunkName: "TheFooter" */'@/components/TheFooter'),
-      TheNotificationsBoard: () => import(/* webpackChunkName: "TheNotificationsBoard" */'@/components/TheNotificationsBoard'),
-      Workspace: () => import(/* webpackChunkName: "Workspace" */'@/components/Workspace'),
-      WorkspaceAddConnectionPanel: () => import(/* webpackChunkName: "WorkspaceAddConnectionPanel" */'@/components/WorkspaceAddConnectionPanel'),
-      ModalSettings: () => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings'),
-      TheScratchpad: () => import(/* webpackChunkName: "TheScratchpad" */'@/components/TheScratchpad'),
-      BaseTextEditor: () => import(/* webpackChunkName: "BaseTextEditor" */'@/components/BaseTextEditor')
-   },
-   data () {
-      return {};
+      TheTitleBar: defineAsyncComponent(() => import(/* webpackChunkName: "TheTitleBar" */'@/components/TheTitleBar')),
+      TheSettingBar,
+      TheFooter: defineAsyncComponent(() => import(/* webpackChunkName: "TheFooter" */'@/components/TheFooter')),
+      TheNotificationsBoard: defineAsyncComponent(() => import(/* webpackChunkName: "TheNotificationsBoard" */'@/components/TheNotificationsBoard')),
+      Workspace: defineAsyncComponent(() => import(/* webpackChunkName: "Workspace" */'@/components/Workspace')),
+      WorkspaceAddConnectionPanel: defineAsyncComponent(() => import(/* webpackChunkName: "WorkspaceAddConnectionPanel" */'@/components/WorkspaceAddConnectionPanel')),
+      ModalSettings: defineAsyncComponent(() => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings')),
+      TheScratchpad: defineAsyncComponent(() => import(/* webpackChunkName: "TheScratchpad" */'@/components/TheScratchpad')),
+      BaseTextEditor: defineAsyncComponent(() => import(/* webpackChunkName: "BaseTextEditor" */'@/components/BaseTextEditor'))
    },
    computed: {
       ...mapGetters({
diff --git a/src/renderer/components/BaseConfirmModal.vue b/src/renderer/components/BaseConfirmModal.vue
index e562d9fa..afffd1f6 100644
--- a/src/renderer/components/BaseConfirmModal.vue
+++ b/src/renderer/components/BaseConfirmModal.vue
@@ -81,7 +81,7 @@ export default {
    created () {
       window.addEventListener('keydown', this.onKey);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/BaseContextMenu.vue b/src/renderer/components/BaseContextMenu.vue
index 9be75aed..1bafc058 100644
--- a/src/renderer/components/BaseContextMenu.vue
+++ b/src/renderer/components/BaseContextMenu.vue
@@ -61,7 +61,7 @@ export default {
       if (this.$refs.contextContent)
          this.contextSize = this.$refs.contextContent.getBoundingClientRect();
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/BaseUploadInput.vue b/src/renderer/components/BaseUploadInput.vue
index 9f4245ee..59ef549a 100644
--- a/src/renderer/components/BaseUploadInput.vue
+++ b/src/renderer/components/BaseUploadInput.vue
@@ -4,7 +4,7 @@
          <i class="mdi mdi-folder-open mr-1" />{{ message }}
       </span>
       <span class="text-ellipsis file-uploader-value">
-         {{ value | lastPart }}
+         {{ lastPart(value) }}
       </span>
       <i
          v-if="value.length"
@@ -25,16 +25,6 @@
 <script>
 export default {
    name: 'BaseUploadInput',
-   filters: {
-      lastPart (string) {
-         if (!string) return '';
-
-         string = string.split(/[/\\]+/).pop();
-         if (string.length >= 19)
-            string = `...${string.slice(-19)}`;
-         return string;
-      }
-   },
    props: {
       message: {
          default: 'Browse',
@@ -56,6 +46,14 @@ export default {
    methods: {
       clear () {
          this.$emit('clear');
+      },
+      lastPart (string) {
+         if (!string) return '';
+
+         string = string.split(/[/\\]+/).pop();
+         if (string.length >= 19)
+            string = `...${string.slice(-19)}`;
+         return string;
       }
    }
 };
diff --git a/src/renderer/components/BaseVirtualScroll.vue b/src/renderer/components/BaseVirtualScroll.vue
index 4f81682f..07cccf07 100644
--- a/src/renderer/components/BaseVirtualScroll.vue
+++ b/src/renderer/components/BaseVirtualScroll.vue
@@ -49,7 +49,7 @@ export default {
    mounted () {
       this.setScrollElement();
    },
-   beforeDestroy () {
+   beforeUnmount () {
       this.localScrollElement.removeEventListener('scroll', this.checkScrollPosition);
    },
    methods: {
diff --git a/src/renderer/components/FakerSelect.vue b/src/renderer/components/FakerSelect.vue
index fc1627b0..d3571c84 100644
--- a/src/renderer/components/FakerSelect.vue
+++ b/src/renderer/components/FakerSelect.vue
@@ -36,8 +36,8 @@
       <ForeignKeySelect
          v-else-if="foreignKeys.includes(field.name)"
          ref="formInput"
+         v-model="selectedValue"
          class="form-select"
-         :value.sync="selectedValue"
          :key-usage="getKeyUsage(field.name)"
          :disabled="!isChecked"
       />
diff --git a/src/renderer/components/ForeignKeySelect.vue b/src/renderer/components/ForeignKeySelect.vue
index 8412f133..c668077c 100644
--- a/src/renderer/components/ForeignKeySelect.vue
+++ b/src/renderer/components/ForeignKeySelect.vue
@@ -15,7 +15,7 @@
          :value="row.foreign_column"
          :selected="row.foreign_column === value"
       >
-         {{ row.foreign_column }} {{ 'foreign_description' in row ? ` - ${row.foreign_description}` : '' | cutText }}
+         {{ row.foreign_column }} {{ cutText('foreign_description' in row ? ` - ${row.foreign_description}` : '') }}
       </option>
    </select>
 </template>
@@ -26,12 +26,6 @@ import { mapGetters, mapActions } from 'vuex';
 import { TEXT, LONG_TEXT } from 'common/fieldTypes';
 export default {
    name: 'ForeignKeySelect',
-   filters: {
-      cutText (val) {
-         if (typeof val !== 'string') return val;
-         return val.length > 15 ? `${val.substring(0, 15)}...` : val;
-      }
-   },
    props: {
       value: [String, Number],
       keyUsage: Object,
@@ -98,6 +92,10 @@ export default {
       }),
       onChange () {
          this.$emit('update:value', this.$refs.editField.value);
+      },
+      cutText (val) {
+         if (typeof val !== 'string') return val;
+         return val.length > 15 ? `${val.substring(0, 15)}...` : val;
       }
    }
 };
diff --git a/src/renderer/components/ModalAskParameters.vue b/src/renderer/components/ModalAskParameters.vue
index 043522bc..c6be6a43 100644
--- a/src/renderer/components/ModalAskParameters.vue
+++ b/src/renderer/components/ModalAskParameters.vue
@@ -36,7 +36,7 @@
                            class="input-group-addon field-type cut-text"
                            :class="typeClass(parameter.type)"
                         >
-                           {{ parameter.type }} {{ parameter.length | wrapNumber }}
+                           {{ parameter.type }} {{ wrapNumber(parameter.length) }}
                         </span>
                      </div>
                   </div>
@@ -56,12 +56,6 @@ export default {
    components: {
       ConfirmModal
    },
-   filters: {
-      wrapNumber (num) {
-         if (!num) return '';
-         return `(${num})`;
-      }
-   },
    props: {
       localRoutine: Object,
       client: String
@@ -83,7 +77,7 @@ export default {
          this.$refs.firstInput[0].focus();
       }, 20);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
@@ -122,6 +116,10 @@ export default {
          e.stopPropagation();
          if (e.key === 'Escape')
             this.closeModal();
+      },
+      wrapNumber (num) {
+         if (!num) return '';
+         return `(${num})`;
       }
    }
 };
diff --git a/src/renderer/components/ModalDiscardChanges.vue b/src/renderer/components/ModalDiscardChanges.vue
index de9f8461..3de01d19 100644
--- a/src/renderer/components/ModalDiscardChanges.vue
+++ b/src/renderer/components/ModalDiscardChanges.vue
@@ -29,7 +29,7 @@ export default {
    created () {
       window.addEventListener('keydown', this.onKey);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/ModalEditSchema.vue b/src/renderer/components/ModalEditSchema.vue
index 4d7b6ad2..1aec8499 100644
--- a/src/renderer/components/ModalEditSchema.vue
+++ b/src/renderer/components/ModalEditSchema.vue
@@ -124,7 +124,7 @@ export default {
          this.$refs.firstInput.focus();
       }, 20);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/ModalExportSchema.vue b/src/renderer/components/ModalExportSchema.vue
index 5f719c0d..0e7efd53 100644
--- a/src/renderer/components/ModalExportSchema.vue
+++ b/src/renderer/components/ModalExportSchema.vue
@@ -85,8 +85,8 @@
                                  >
                                     <input
                                        type="checkbox"
-                                       :indeterminate.prop="includeStructureStatus === 2"
-                                       :checked.prop="!!includeStructureStatus"
+                                       :indeterminate="includeStructureStatus === 2"
+                                       :checked="!!includeStructureStatus"
                                     >
                                     <i class="form-icon" />
                                  </label>
@@ -98,8 +98,8 @@
                                  >
                                     <input
                                        type="checkbox"
-                                       :indeterminate.prop="includeContentStatus === 2"
-                                       :checked.prop="!!includeContentStatus"
+                                       :indeterminate="includeContentStatus === 2"
+                                       :checked="!!includeContentStatus"
                                     >
                                     <i class="form-icon" />
                                  </label>
@@ -111,8 +111,8 @@
                                  >
                                     <input
                                        type="checkbox"
-                                       :indeterminate.prop="includeDropStatementStatus === 2"
-                                       :checked.prop="!!includeDropStatementStatus"
+                                       :indeterminate="includeDropStatementStatus === 2"
+                                       :checked="!!includeDropStatementStatus"
                                     >
                                     <i class="form-icon" />
                                  </label>
@@ -202,7 +202,6 @@
                               v-model.number="options.sqlInsertAfter"
                               type="number"
                               class="form-input"
-                              value="250"
                            >
                         </div>
                         <div class="column col-6">
@@ -363,7 +362,7 @@ export default {
 
       ipcRenderer.on('export-progress', this.updateProgress);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
       ipcRenderer.off('export-progress', this.updateProgress);
    },
diff --git a/src/renderer/components/ModalFakerRows.vue b/src/renderer/components/ModalFakerRows.vue
index b7785537..18789314 100644
--- a/src/renderer/components/ModalFakerRows.vue
+++ b/src/renderer/components/ModalFakerRows.vue
@@ -25,6 +25,7 @@
                         </div>
                         <div class="column columns col-sm-12">
                            <FakerSelect
+                              v-model="localRow[field.name]"
                               :type="field.type"
                               class="column columns pr-0"
                               :is-checked="!fieldsToExclude.includes(field.name)"
@@ -33,10 +34,9 @@
                               :field="field"
                               :field-length="fieldLength(field)"
                               :field-obj="localRow[field.name]"
-                              :value.sync="localRow[field.name]"
                            >
                               <span class="input-group-addon field-type" :class="typeClass(field.type)">
-                                 {{ field.type }} {{ fieldLength(field) | wrapNumber }}
+                                 {{ field.type }} {{ wrapNumber(fieldLength(field)) }}
                               </span>
                               <label class="form-checkbox ml-3" :title="$t('word.insert')">
                                  <input
@@ -195,12 +195,6 @@ export default {
    components: {
       FakerSelect
    },
-   filters: {
-      wrapNumber (num) {
-         if (!num) return '';
-         return `(${num})`;
-      }
-   },
    props: {
       tabUid: [String, Number],
       fields: Array,
@@ -287,7 +281,7 @@ export default {
 
       this.localRow = { ...rowObj };
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
@@ -367,6 +361,10 @@ export default {
          e.stopPropagation();
          if (e.key === 'Escape')
             this.closeModal();
+      },
+      wrapNumber (num) {
+         if (!num) return '';
+         return `(${num})`;
       }
    }
 };
diff --git a/src/renderer/components/ModalHistory.vue b/src/renderer/components/ModalHistory.vue
index 6fdd83c4..50274fa6 100644
--- a/src/renderer/components/ModalHistory.vue
+++ b/src/renderer/components/ModalHistory.vue
@@ -44,7 +44,7 @@
                      :visible-height="resultsSize"
                      :scroll-element="scrollElement"
                   >
-                     <template slot-scope="{ items }">
+                     <template #default="{ items }">
                         <div
                            v-for="query in items"
                            :key="query.uid"
@@ -156,7 +156,7 @@ export default {
       this.resizeResults();
       window.addEventListener('resize', this.resizeResults);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey, { capture: true });
       window.removeEventListener('resize', this.resizeResults);
       clearInterval(this.refreshInterval);
diff --git a/src/renderer/components/ModalImportSchema.vue b/src/renderer/components/ModalImportSchema.vue
index e6886f30..0532cfbe 100644
--- a/src/renderer/components/ModalImportSchema.vue
+++ b/src/renderer/components/ModalImportSchema.vue
@@ -89,7 +89,7 @@ export default {
       ipcRenderer.on('import-progress', this.updateProgress);
       ipcRenderer.on('query-error', this.handleQueryError);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
       ipcRenderer.off('import-progress', this.updateProgress);
       ipcRenderer.off('query-error', this.handleQueryError);
diff --git a/src/renderer/components/ModalNewSchema.vue b/src/renderer/components/ModalNewSchema.vue
index de5f0c06..fd4180e0 100644
--- a/src/renderer/components/ModalNewSchema.vue
+++ b/src/renderer/components/ModalNewSchema.vue
@@ -103,7 +103,7 @@ export default {
          this.$refs.firstInput.focus();
       }, 20);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/ModalNewTableRow.vue b/src/renderer/components/ModalNewTableRow.vue
index e94de8f3..81662cb2 100644
--- a/src/renderer/components/ModalNewTableRow.vue
+++ b/src/renderer/components/ModalNewTableRow.vue
@@ -27,8 +27,8 @@
                            <ForeignKeySelect
                               v-if="foreignKeys.includes(field.name)"
                               ref="formInput"
+                              v-model="localRow[field.name]"
                               class="form-select"
-                              :value.sync="localRow[field.name]"
                               :key-usage="getKeyUsage(field.name)"
                               :disabled="fieldsToExclude.includes(field.name)"
                            />
@@ -71,7 +71,7 @@
                               :tabindex="key+1"
                            >
                            <span class="input-group-addon" :class="typeCLass(field.type)">
-                              {{ field.type }} {{ fieldLength(field) | wrapNumber }}
+                              {{ field.type }} {{ wrapNumber(fieldLength(field)) }}
                            </span>
                            <label class="form-checkbox ml-3" :title="$t('word.insert')">
                               <input
@@ -132,12 +132,6 @@ export default {
    directives: {
       mask: VueMaskDirective
    },
-   filters: {
-      wrapNumber (num) {
-         if (!num) return '';
-         return `(${num})`;
-      }
-   },
    props: {
       tabUid: [String, Number],
       fields: Array,
@@ -216,7 +210,7 @@ export default {
          firstSelectableInput.focus();
       }, 20);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
@@ -331,6 +325,10 @@ export default {
          e.stopPropagation();
          if (e.key === 'Escape')
             this.closeModal();
+      },
+      wrapNumber (num) {
+         if (!num) return '';
+         return `(${num})`;
       }
    }
 };
diff --git a/src/renderer/components/ModalProcessesList.vue b/src/renderer/components/ModalProcessesList.vue
index 25c135ec..e90e0e0c 100644
--- a/src/renderer/components/ModalProcessesList.vue
+++ b/src/renderer/components/ModalProcessesList.vue
@@ -112,7 +112,7 @@
                      :visible-height="resultsSize"
                      :scroll-element="scrollElement"
                   >
-                     <template slot-scope="{ items }">
+                     <template #default="{ items }">
                         <ModalProcessesListRow
                            v-for="row in items"
                            :key="row.id"
@@ -203,7 +203,7 @@ export default {
       this.getProcessesList();
       window.addEventListener('resize', this.resizeResults);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey, { capture: true });
       window.removeEventListener('resize', this.resizeResults);
       clearInterval(this.refreshInterval);
diff --git a/src/renderer/components/ModalProcessesListRow.vue b/src/renderer/components/ModalProcessesListRow.vue
index 3c40f002..073e803a 100644
--- a/src/renderer/components/ModalProcessesListRow.vue
+++ b/src/renderer/components/ModalProcessesListRow.vue
@@ -12,7 +12,7 @@
             class="cell-content"
             :class="`${isNull(col)} type-${typeof col === 'number' ? 'int' : 'varchar'}`"
             @dblclick="dblClick(cKey)"
-         >{{ col | cutText }}</span>
+         >{{ cutText(col) }}</span>
       </div>
       <ConfirmModal
          v-if="isInfoModal"
@@ -53,12 +53,6 @@ export default {
       ConfirmModal,
       TextEditor
    },
-   filters: {
-      cutText (val) {
-         if (typeof val !== 'string') return val;
-         return val.length > 250 ? `${val.substring(0, 250)}[...]` : val;
-      }
-   },
    props: {
       row: Object
    },
@@ -95,6 +89,10 @@ export default {
             this.editingField = null;
             window.removeEventListener('keydown', this.onKey);
          }
+      },
+      cutText (val) {
+         if (typeof val !== 'string') return val;
+         return val.length > 250 ? `${val.substring(0, 250)}[...]` : val;
       }
    }
 };
diff --git a/src/renderer/components/ModalSettings.vue b/src/renderer/components/ModalSettings.vue
index e44a4928..56eb26cb 100644
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -455,7 +455,7 @@ ORDER BY
       this.selectedTab = this.selectedSettingTab;
       window.addEventListener('keydown', this.onKey);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/TheNotificationsBoard.vue b/src/renderer/components/TheNotificationsBoard.vue
index 479f265a..51324686 100644
--- a/src/renderer/components/TheNotificationsBoard.vue
+++ b/src/renderer/components/TheNotificationsBoard.vue
@@ -4,7 +4,7 @@
       @mouseenter="clearTimeouts"
       @mouseleave="rearmTimeouts"
    >
-      <transition-group name="slide-fade">
+      <transition-group tag="div" name="slide-fade">
          <BaseNotification
             v-for="notification in latestNotifications"
             :key="notification.uid"
diff --git a/src/renderer/components/TheScratchpad.vue b/src/renderer/components/TheScratchpad.vue
index 09e87b28..2c4885f4 100644
--- a/src/renderer/components/TheScratchpad.vue
+++ b/src/renderer/components/TheScratchpad.vue
@@ -15,7 +15,7 @@
          <div>
             <div>
                <TextEditor
-                  :value.sync="localNotes"
+                  v-model="localNotes"
                   editor-class="textarea-editor"
                   mode="markdown"
                   :auto-focus="true"
diff --git a/src/renderer/components/TheSettingBar.vue b/src/renderer/components/TheSettingBar.vue
index f91fb5f6..86f5bf4e 100644
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -10,22 +10,23 @@
          <ul class="settingbar-elements">
             <Draggable
                v-model="connections"
+               :item-key="uid"
                @start="isDragging = true"
                @end="dragStop"
             >
-               <li
-                  v-for="connection in connections"
-                  :key="connection.uid"
-                  draggable="true"
-                  class="settingbar-element btn btn-link ex-tooltip"
-                  :class="{'selected': connection.uid === selectedWorkspace}"
-                  @click.stop="selectWorkspace(connection.uid)"
-                  @contextmenu.prevent="contextMenu($event, connection)"
-                  @mouseover.self="tooltipPosition"
-               >
-                  <i class="settingbar-element-icon dbi" :class="`dbi-${connection.client} ${getStatusBadge(connection.uid)}`" />
-                  <span v-if="!isDragging" class="ex-tooltip-content">{{ getConnectionName(connection.uid) }}</span>
-               </li>
+               <template #item="{element}">
+                  <li
+                     :draggable="true"
+                     class="settingbar-element btn btn-link ex-tooltip"
+                     :class="{'selected': element.uid === selectedWorkspace}"
+                     @click.stop="selectWorkspace(element.uid)"
+                     @contextmenu.prevent="contextMenu($event, element)"
+                     @mouseover.self="tooltipPosition"
+                  >
+                     <i class="settingbar-element-icon dbi" :class="`dbi-${element.client} ${getStatusBadge(element.uid)}`" />
+                     <span v-if="!isDragging" class="ex-tooltip-content">{{ getConnectionName(element.uid) }}</span>
+                  </li>
+               </template>
             </Draggable>
             <li
                class="settingbar-element btn btn-link ex-tooltip"
diff --git a/src/renderer/components/TheTitleBar.vue b/src/renderer/components/TheTitleBar.vue
index 8480a0ed..484ed206 100644
--- a/src/renderer/components/TheTitleBar.vue
+++ b/src/renderer/components/TheTitleBar.vue
@@ -87,7 +87,7 @@ export default {
    created () {
       window.addEventListener('resize', this.onResize);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.onResize);
    },
    methods: {
diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
index 79e6b74e..0543ad10 100644
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -1,264 +1,265 @@
 <template>
    <div v-show="isSelected" class="workspace column columns col-gapless">
       <WorkspaceExploreBar
-         v-if="workspace.connectionStatus === 'connected'"
+         v-if="workspace?.connectionStatus === 'connected'"
          :connection="connection"
          :is-selected="isSelected"
       />
-      <div v-if="workspace.connectionStatus === 'connected'" class="workspace-tabs column columns col-gapless">
+      <div v-if="workspace?.connectionStatus === 'connected'" class="workspace-tabs column columns col-gapless">
          <Draggable
             ref="tabWrap"
             v-model="draggableTabs"
             tag="ul"
+            :item-key="uid"
             group="tabs"
             class="tab tab-block column col-12"
             draggable=".tab-draggable"
-            @mouseover.native="addWheelEvent"
+            @mouseover="addWheelEvent"
          >
-            <li
-               v-for="(tab, i) of draggableTabs"
-               :key="i"
-               class="tab-item tab-draggable"
-               draggable="true"
-               :class="{'active': selectedTab === tab.uid}"
-               @mousedown.left="selectTab({uid: workspace.uid, tab: tab.uid})"
-               @mouseup.middle="closeTab(tab)"
-            >
-               <a
-                  v-if="tab.type === 'query'"
-                  class="tab-link"
-                  :class="{'badge': tab.isChanged}"
+            <template #item="{element}">
+               <li
+                  class="tab-item tab-draggable"
+                  :draggable="true"
+                  :class="{'active': selectedTab === element.uid}"
+                  @mousedown.left="selectTab({uid: workspace.uid, tab: element.uid})"
+                  @mouseup.middle="closeTab(element)"
                >
-                  <i class="mdi mdi-18px mdi-code-tags mr-1" />
-                  <span>
-                     <span>{{ tab.content || 'Query' | cutText }} #{{ tab.index }}</span>
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
+                  <a
+                     v-if="element.type === 'query'"
+                     class="tab-link"
+                     :class="{'badge': element.isChanged}"
+                  >
+                     <i class="mdi mdi-18px mdi-code-tags mr-1" />
+                     <span>
+                        <span>{{ cutText(element.content || 'Query') }} #{{ element.index }}</span>
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
 
-               <a
-                  v-else-if="tab.type === 'temp-data'"
-                  class="tab-link"
-                  @dblclick="openAsPermanentTab(tab)"
-               >
-                  <i class="mdi mdi-18px mr-1" :class="tab.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
-                  <span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
-                     <span class=" text-italic">{{ tab.elementName | cutText }}</span>
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
+                  <a
+                     v-else-if="element.type === 'temp-data'"
+                     class="tab-link"
+                     @dblclick="openAsPermanentTab(element)"
+                  >
+                     <i class="mdi mdi-18px mr-1" :class="element.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
+                     <span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
+                        <span class=" text-italic">{{ cutText(element.elementName) }}</span>
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
 
-               <a v-else-if="tab.type === 'data'" class="tab-link">
-                  <i class="mdi mdi-18px mr-1" :class="tab.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
-                  <span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
-                     {{ tab.elementName | cutText }}
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
+                  <a v-else-if="element.type === 'data'" class="tab-link">
+                     <i class="mdi mdi-18px mr-1" :class="element.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
+                     <span :title="`${$t('word.data').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
+                        {{ cutText(element.elementName) }}
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
 
-               <a
-                  v-else-if="tab.type === 'new-table'"
-                  class="tab-link"
-                  :class="{'badge': tab.isChanged}"
-               >
-                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
-                     {{ $t('message.newTable') }}
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
+                  <a
+                     v-else-if="element.type === 'new-table'"
+                     class="tab-link"
+                     :class="{'badge': element.isChanged}"
+                  >
+                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
+                        {{ $t('message.newTable') }}
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
 
-               <a
-                  v-else-if="tab.type === 'table-props'"
-                  class="tab-link"
-                  :class="{'badge': tab.isChanged}"
-               >
-                  <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
-                  <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
-                     {{ tab.elementName | cutText }}
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
+                  <a
+                     v-else-if="element.type === 'table-props'"
+                     class="tab-link"
+                     :class="{'badge': element.isChanged}"
+                  >
+                     <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
+                     <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
+                        {{ cutText(element.elementName) }}
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
 
-               <a
-                  v-else-if="tab.type === 'view-props'"
-                  class="tab-link"
-                  :class="{'badge': tab.isChanged}"
-               >
-                  <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
-                  <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.view`)}`">
-                     {{ tab.elementName | cutText }}
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
+                  <a
+                     v-else-if="element.type === 'view-props'"
+                     class="tab-link"
+                     :class="{'badge': element.isChanged}"
+                  >
+                     <i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
+                     <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.view`)}`">
+                        {{ cutText(element.elementName) }}
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
 
-               <a
-                  v-else-if="tab.type === 'new-view'"
-                  class="tab-link"
-                  :class="{'badge': tab.isChanged}"
-               >
-                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
-                     {{ $t('message.newView') }}
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
+                  <a
+                     v-else-if="element.type === 'new-view'"
+                     class="tab-link"
+                     :class="{'badge': element.isChanged}"
+                  >
+                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
+                        {{ $t('message.newView') }}
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
 
-               <a
-                  v-else-if="tab.type === 'new-trigger'"
-                  class="tab-link"
-                  :class="{'badge': tab.isChanged}"
-               >
-                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
-                     {{ $t('message.newTrigger') }}
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
+                  <a
+                     v-else-if="element.type === 'new-trigger'"
+                     class="tab-link"
+                     :class="{'badge': element.isChanged}"
+                  >
+                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
+                        {{ $t('message.newTrigger') }}
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
 
-               <a
-                  v-else-if="tab.type === 'new-routine'"
-                  class="tab-link"
-                  :class="{'badge': tab.isChanged}"
-               >
-                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
-                     {{ $t('message.newRoutine') }}
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
+                  <a
+                     v-else-if="element.type === 'new-routine'"
+                     class="tab-link"
+                     :class="{'badge': element.isChanged}"
+                  >
+                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
+                        {{ $t('message.newRoutine') }}
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
 
-               <a
-                  v-else-if="tab.type === 'new-function'"
-                  class="tab-link"
-                  :class="{'badge': tab.isChanged}"
-               >
-                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
-                     {{ $t('message.newFunction') }}
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
+                  <a
+                     v-else-if="element.type === 'new-function'"
+                     class="tab-link"
+                     :class="{'badge': element.isChanged}"
+                  >
+                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
+                        {{ $t('message.newFunction') }}
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
 
-               <a
-                  v-else-if="tab.type === 'new-trigger-function'"
-                  class="tab-link"
-                  :class="{'badge': tab.isChanged}"
-               >
-                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
-                     {{ $t('message.newTriggerFunction') }}
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
+                  <a
+                     v-else-if="element.type === 'new-trigger-function'"
+                     class="tab-link"
+                     :class="{'badge': element.isChanged}"
+                  >
+                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
+                        {{ $t('message.newTriggerFunction') }}
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
 
-               <a
-                  v-else-if="tab.type === 'new-scheduler'"
-                  class="tab-link"
-                  :class="{'badge': tab.isChanged}"
-               >
-                  <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
-                  <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
-                     {{ $t('message.newScheduler') }}
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
+                  <a
+                     v-else-if="element.type === 'new-scheduler'"
+                     class="tab-link"
+                     :class="{'badge': element.isChanged}"
+                  >
+                     <i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
+                     <span :title="`${$t('word.new').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
+                        {{ $t('message.newScheduler') }}
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
 
-               <a
-                  v-else-if="tab.type.includes('temp-')"
-                  class="tab-link"
-                  :class="{'badge': tab.isChanged}"
-                  @dblclick="openAsPermanentTab(tab)"
-               >
-                  <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
-                  <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
-                     <span class=" text-italic">{{ tab.elementName | cutText }}</span>
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
+                  <a
+                     v-else-if="element.type.includes('temp-')"
+                     class="tab-link"
+                     :class="{'badge': element.isChanged}"
+                     @dblclick="openAsPermanentTab(element)"
+                  >
+                     <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
+                     <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
+                        <span class=" text-italic">{{ cutText(element.elementName) }}</span>
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
 
-               <a
-                  v-else
-                  class="tab-link"
-                  :class="{'badge': tab.isChanged}"
-               >
-                  <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
-                  <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${tab.elementType}`)}`">
-                     {{ tab.elementName | cutText }}
-                     <span
-                        class="btn btn-clear"
-                        :title="$t('word.close')"
-                        @mousedown.left.stop
-                        @click.stop="closeTab(tab)"
-                     />
-                  </span>
-               </a>
-            </li>
+                  <a
+                     v-else
+                     class="tab-link"
+                     :class="{'badge': element.isChanged}"
+                  >
+                     <i class="mdi mdi-18px mdi-tune-vertical-variant mr-1" />
+                     <span :title="`${$t('word.settings').toUpperCase()}: ${$tc(`word.${element.elementType}`)}`">
+                        {{ cutText(element.elementName) }}
+                        <span
+                           class="btn btn-clear"
+                           :title="$t('word.close')"
+                           @mousedown.left.stop
+                           @click.stop="closeTab(element)"
+                        />
+                     </span>
+                  </a>
+               </li>
+            </template>
             <template #header>
                <li
                   v-if="workspace.customizations.processesList"
@@ -521,15 +522,6 @@ export default {
       ModalProcessesList,
       ModalDiscardChanges
    },
-   filters: {
-      cutText (string) {
-         const limit = 20;
-         const escapedString = string.replace(/\s{2,}/g, ' ');
-         if (escapedString.length > limit)
-            return `${escapedString.substr(0, limit)}...`;
-         return escapedString;
-      }
-   },
    props: {
       connection: Object
    },
@@ -589,13 +581,16 @@ export default {
       }
    },
    watch: {
-      queryTabs: function (newVal, oldVal) {
-         if (newVal.length > oldVal.length) {
-            setTimeout(() => {
-               const scroller = this.$refs.tabWrap;
-               if (scroller) scroller.$el.scrollLeft = scroller.$el.scrollWidth;
-            }, 0);
-         }
+      queryTabs: {
+         handler (newVal, oldVal) {
+            if (newVal.length > oldVal.length) {
+               setTimeout(() => {
+                  const scroller = this.$refs.tabWrap;
+                  if (scroller) scroller.$el.scrollLeft = scroller.$el.scrollWidth;
+               }, 0);
+            }
+         },
+         deep: true
       }
    },
    async created () {
@@ -605,7 +600,7 @@ export default {
       if (isInitiated)
          this.connectWorkspace(this.connection);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
@@ -683,6 +678,13 @@ export default {
             });
             this.hasWheelEvent = true;
          }
+      },
+      cutText (string) {
+         const limit = 20;
+         const escapedString = string.replace(/\s{2,}/g, ' ');
+         if (escapedString.length > limit)
+            return `${escapedString.substr(0, limit)}...`;
+         return escapedString;
       }
    }
 };
diff --git a/src/renderer/components/WorkspaceTabNewFunction.vue b/src/renderer/components/WorkspaceTabNewFunction.vue
index 0b3158cf..fc6da276 100644
--- a/src/renderer/components/WorkspaceTabNewFunction.vue
+++ b/src/renderer/components/WorkspaceTabNewFunction.vue
@@ -185,7 +185,7 @@
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
-            :value.sync="localFunction.sql"
+            v-model="localFunction.sql"
             :workspace="workspace"
             :schema="schema"
             :height="editorHeight"
@@ -302,10 +302,10 @@ export default {
          this.$refs.firstInput.focus();
       }, 100);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabNewRoutine.vue b/src/renderer/components/WorkspaceTabNewRoutine.vue
index fd941076..b81dec41 100644
--- a/src/renderer/components/WorkspaceTabNewRoutine.vue
+++ b/src/renderer/components/WorkspaceTabNewRoutine.vue
@@ -145,7 +145,7 @@
             v-show="isSelected"
             :key="`new-${_uid}`"
             ref="queryEditor"
-            :value.sync="localRoutine.sql"
+            v-model="localRoutine.sql"
             :workspace="workspace"
             :schema="schema"
             :height="editorHeight"
@@ -261,10 +261,10 @@ export default {
 
       window.addEventListener('resize', this.resizeQueryEditor);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabNewScheduler.vue b/src/renderer/components/WorkspaceTabNewScheduler.vue
index 3e732a10..245bbd13 100644
--- a/src/renderer/components/WorkspaceTabNewScheduler.vue
+++ b/src/renderer/components/WorkspaceTabNewScheduler.vue
@@ -125,7 +125,7 @@
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
-            :value.sync="localScheduler.sql"
+            v-model="localScheduler.sql"
             :workspace="workspace"
             :schema="schema"
             :height="editorHeight"
@@ -237,10 +237,10 @@ export default {
 
       window.addEventListener('resize', this.resizeQueryEditor);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabNewTable.vue b/src/renderer/components/WorkspaceTabNewTable.vue
index 11f47486..9c2a986d 100644
--- a/src/renderer/components/WorkspaceTabNewTable.vue
+++ b/src/renderer/components/WorkspaceTabNewTable.vue
@@ -276,7 +276,7 @@ export default {
          this.$refs.firstInput.focus();
       }, 100);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabNewTrigger.vue b/src/renderer/components/WorkspaceTabNewTrigger.vue
index ae8bb1ae..7e60555d 100644
--- a/src/renderer/components/WorkspaceTabNewTrigger.vue
+++ b/src/renderer/components/WorkspaceTabNewTrigger.vue
@@ -122,7 +122,7 @@
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
-            :value.sync="localTrigger.sql"
+            v-model="localTrigger.sql"
             :workspace="workspace"
             :schema="schema"
             :height="editorHeight"
@@ -226,10 +226,10 @@ export default {
 
       window.addEventListener('resize', this.resizeQueryEditor);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabNewTriggerFunction.vue b/src/renderer/components/WorkspaceTabNewTriggerFunction.vue
index 9d91c15a..12c05eab 100644
--- a/src/renderer/components/WorkspaceTabNewTriggerFunction.vue
+++ b/src/renderer/components/WorkspaceTabNewTriggerFunction.vue
@@ -98,7 +98,7 @@
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
-            :value.sync="localFunction.sql"
+            v-model="localFunction.sql"
             :workspace="workspace"
             :schema="schema"
             :height="editorHeight"
@@ -202,10 +202,10 @@ export default {
 
       window.addEventListener('resize', this.resizeQueryEditor);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabNewView.vue b/src/renderer/components/WorkspaceTabNewView.vue
index a85b1f63..6c138cb6 100644
--- a/src/renderer/components/WorkspaceTabNewView.vue
+++ b/src/renderer/components/WorkspaceTabNewView.vue
@@ -111,7 +111,7 @@
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
-            :value.sync="localView.sql"
+            v-model="localView.sql"
             :workspace="workspace"
             :schema="schema"
             :height="editorHeight"
@@ -209,10 +209,10 @@ export default {
 
       window.addEventListener('resize', this.resizeQueryEditor);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabPropsFunction.vue b/src/renderer/components/WorkspaceTabPropsFunction.vue
index c8a4d04a..3f7fbb86 100644
--- a/src/renderer/components/WorkspaceTabPropsFunction.vue
+++ b/src/renderer/components/WorkspaceTabPropsFunction.vue
@@ -197,7 +197,7 @@
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
-            :value.sync="localFunction.sql"
+            v-model="localFunction.sql"
             :workspace="workspace"
             :schema="schema"
             :height="editorHeight"
@@ -339,10 +339,10 @@ export default {
    mounted () {
       window.addEventListener('resize', this.resizeQueryEditor);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue b/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue
index 1f2cff35..1ce00213 100644
--- a/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue
@@ -215,7 +215,7 @@ export default {
       this.getModalInnerHeight();
       window.addEventListener('resize', this.getModalInnerHeight);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.getModalInnerHeight);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabPropsRoutine.vue b/src/renderer/components/WorkspaceTabPropsRoutine.vue
index ced738d0..a56175f2 100644
--- a/src/renderer/components/WorkspaceTabPropsRoutine.vue
+++ b/src/renderer/components/WorkspaceTabPropsRoutine.vue
@@ -154,7 +154,7 @@
             v-show="isSelected"
             :key="`${routine}-${_uid}`"
             ref="queryEditor"
-            :value.sync="localRoutine.sql"
+            v-model="localRoutine.sql"
             :workspace="workspace"
             :schema="schema"
             :height="editorHeight"
@@ -284,10 +284,10 @@ export default {
    mounted () {
       window.addEventListener('resize', this.resizeQueryEditor);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue b/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue
index 4f8e8d57..78fd6630 100644
--- a/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue
@@ -215,7 +215,7 @@ export default {
       this.getModalInnerHeight();
       window.addEventListener('resize', this.getModalInnerHeight);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.getModalInnerHeight);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabPropsScheduler.vue b/src/renderer/components/WorkspaceTabPropsScheduler.vue
index d0207f0b..7c86dc30 100644
--- a/src/renderer/components/WorkspaceTabPropsScheduler.vue
+++ b/src/renderer/components/WorkspaceTabPropsScheduler.vue
@@ -124,7 +124,7 @@
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
-            :value.sync="localScheduler.sql"
+            v-model="localScheduler.sql"
             :workspace="workspace"
             :schema="schema"
             :height="editorHeight"
@@ -236,10 +236,10 @@ export default {
    mounted () {
       window.addEventListener('resize', this.resizeQueryEditor);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabPropsTable.vue b/src/renderer/components/WorkspaceTabPropsTable.vue
index 32fecda5..1a64bf7c 100644
--- a/src/renderer/components/WorkspaceTabPropsTable.vue
+++ b/src/renderer/components/WorkspaceTabPropsTable.vue
@@ -228,7 +228,7 @@ export default {
          return this.getWorkspace(this.connection.uid);
       },
       tabUid () {
-         return this.$vnode.key;
+         return this.$vnode?.key;
       },
       defaultEngine () {
          const engine = this.getDatabaseVariable(this.connection.uid, 'default_storage_engine');
@@ -277,7 +277,7 @@ export default {
       this.getFieldsData();
       window.addEventListener('keydown', this.onKey);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
@@ -415,7 +415,7 @@ export default {
          const localIDs = this.localFields.reduce((acc, curr) => [...acc, curr._antares_id], []);
 
          // Fields Additions
-         const additions = this.localFields.filter((field, i) => !originalIDs.includes(field._antares_id)).map(field => {
+         const additions = this.localFields.filter(field => !originalIDs.includes(field._antares_id)).map(field => {
             const lI = this.localFields.findIndex(localField => localField._antares_id === field._antares_id);
             const after = lI > 0 ? this.localFields[lI - 1].name : false;
             return { ...field, after };
diff --git a/src/renderer/components/WorkspaceTabPropsTableFields.vue b/src/renderer/components/WorkspaceTabPropsTableFields.vue
index dafc3cfb..faa4de04 100644
--- a/src/renderer/components/WorkspaceTabPropsTableFields.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableFields.vue
@@ -105,19 +105,20 @@
             ref="resultTable"
             :list="fields"
             class="tbody"
+            :item-key="_antares_id"
             handle=".row-draggable"
          >
-            <TableRow
-               v-for="row in fields"
-               :key="row._antares_id"
-               :row="row"
-               :indexes="getIndexes(row.name)"
-               :foreigns="getForeigns(row.name)"
-               :data-types="dataTypes"
-               :customizations="customizations"
-               @contextmenu="contextMenu"
-               @rename-field="$emit('rename-field', $event)"
-            />
+            <template #item="{element}">
+               <TableRow
+                  :row="element"
+                  :indexes="getIndexes(element.name)"
+                  :foreigns="getForeigns(element.name)"
+                  :data-types="dataTypes"
+                  :customizations="customizations"
+                  @contextmenu="contextMenu"
+                  @rename-field="$emit('rename-field', $event)"
+               />
+            </template>
          </Draggable>
       </div>
    </div>
@@ -195,7 +196,7 @@ export default {
    mounted () {
       window.addEventListener('resize', this.resizeResults);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeResults);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue b/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
index 7e7af311..7abc163c 100644
--- a/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
@@ -259,7 +259,7 @@ export default {
       this.getModalInnerHeight();
       window.addEventListener('resize', this.getModalInnerHeight);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.getModalInnerHeight);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue b/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue
index d2617c4f..b648d715 100644
--- a/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue
@@ -181,7 +181,7 @@ export default {
       this.getModalInnerHeight();
       window.addEventListener('resize', this.getModalInnerHeight);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.getModalInnerHeight);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabPropsTrigger.vue b/src/renderer/components/WorkspaceTabPropsTrigger.vue
index cf3d5f21..09286815 100644
--- a/src/renderer/components/WorkspaceTabPropsTrigger.vue
+++ b/src/renderer/components/WorkspaceTabPropsTrigger.vue
@@ -121,7 +121,7 @@
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
-            :value.sync="localTrigger.sql"
+            v-model="localTrigger.sql"
             :workspace="workspace"
             :schema="schema"
             :height="editorHeight"
@@ -227,10 +227,10 @@ export default {
    mounted () {
       window.addEventListener('resize', this.resizeQueryEditor);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue b/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue
index 1ba2843d..b4f0d98b 100644
--- a/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue
+++ b/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue
@@ -85,7 +85,7 @@
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
-            :value.sync="localFunction.sql"
+            v-model="localFunction.sql"
             :workspace="workspace"
             :schema="schema"
             :height="editorHeight"
@@ -204,10 +204,10 @@ export default {
    mounted () {
       window.addEventListener('resize', this.resizeQueryEditor);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabPropsView.vue b/src/renderer/components/WorkspaceTabPropsView.vue
index 24291824..3545e555 100644
--- a/src/renderer/components/WorkspaceTabPropsView.vue
+++ b/src/renderer/components/WorkspaceTabPropsView.vue
@@ -110,7 +110,7 @@
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
-            :value.sync="localView.sql"
+            v-model="localView.sql"
             :workspace="workspace"
             :schema="schema"
             :height="editorHeight"
@@ -205,10 +205,10 @@ export default {
    mounted () {
       window.addEventListener('resize', this.resizeQueryEditor);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeQueryEditor);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabQuery.vue b/src/renderer/components/WorkspaceTabQuery.vue
index b16fc82f..541dd3c6 100644
--- a/src/renderer/components/WorkspaceTabQuery.vue
+++ b/src/renderer/components/WorkspaceTabQuery.vue
@@ -3,18 +3,18 @@
       v-show="isSelected"
       class="workspace-query-tab column col-12 columns col-gapless no-outline p-0"
       tabindex="0"
-      @keydown.116="runQuery(query)"
-      @keydown.75="killTabQuery"
-      @keydown.ctrl.alt.87="clear"
-      @keydown.ctrl.66="beautify"
-      @keydown.ctrl.71="openHistoryModal"
+      @keydown.f5="runQuery(query)"
+      @keydown.k="killTabQuery"
+      @keydown.ctrl.alt.w="clear"
+      @keydown.ctrl.b="beautify"
+      @keydown.ctrl.g="openHistoryModal"
    >
       <div class="workspace-query-runner column col-12">
          <QueryEditor
             v-show="isSelected"
             ref="queryEditor"
+            v-model="query"
             :auto-focus="true"
-            :value.sync="query"
             :workspace="workspace"
             :schema="breadcrumbsSchema"
             :is-selected="isSelected"
@@ -296,7 +296,7 @@ export default {
       if (this.tab.autorun)
          this.runQuery(this.query);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
       const params = {
          uid: this.connection.uid,
diff --git a/src/renderer/components/WorkspaceTabQueryTable.vue b/src/renderer/components/WorkspaceTabQueryTable.vue
index 08283527..82a9edd5 100644
--- a/src/renderer/components/WorkspaceTabQueryTable.vue
+++ b/src/renderer/components/WorkspaceTabQueryTable.vue
@@ -4,8 +4,8 @@
       class="vscroll no-outline"
       tabindex="0"
       :style="{'height': resultsSize+'px'}"
-      @keyup.46="showDeleteConfirmModal"
-      @keydown.ctrl.65="selectAllRows($event)"
+      @keyup.delete="showDeleteConfirmModal"
+      @keydown.ctrl.a="selectAllRows($event)"
       @keydown.esc="deselectRows"
    >
       <TableContext
@@ -68,7 +68,7 @@
             :visible-height="resultsSize"
             :scroll-element="scrollElement"
          >
-            <template slot-scope="{ items }">
+            <template #default="{ items }">
                <WorkspaceTabQueryTableRow
                   v-for="row in items"
                   :key="row._antares_id"
@@ -256,7 +256,7 @@ export default {
    mounted () {
       window.addEventListener('resize', this.resizeResults);
    },
-   destroyed () {
+   unmounted () {
       window.removeEventListener('resize', this.resizeResults);
    },
    methods: {
diff --git a/src/renderer/components/WorkspaceTabQueryTableRow.vue b/src/renderer/components/WorkspaceTabQueryTableRow.vue
index c24a3e38..2bb9be3c 100644
--- a/src/renderer/components/WorkspaceTabQueryTableRow.vue
+++ b/src/renderer/components/WorkspaceTabQueryTableRow.vue
@@ -18,11 +18,11 @@
                class="cell-content"
                :class="`${isNull(col)} ${typeClass(fields[cKey].type)}`"
                @dblclick="editON($event, col, cKey)"
-            >{{ col | typeFormat(fields[cKey].type.toLowerCase(), fields[cKey].length) | cutText }}</span>
+            >{{ cutText(typeFormat(col, fields[cKey].type.toLowerCase(), fields[cKey].length)) }}</span>
             <ForeignKeySelect
                v-else-if="isForeignKey(cKey)"
+               v-model="editingContent"
                class="editable-field"
-               :value.sync="editingContent"
                :key-usage="getKeyUsage(cKey)"
                size="small"
                @blur="editOFF"
@@ -85,7 +85,7 @@
             <div class="mb-2">
                <div>
                   <TextEditor
-                     :value.sync="editingContent"
+                     v-model="editingContent"
                      editor-class="textarea-editor"
                      :mode="editorMode"
                   />
@@ -176,7 +176,7 @@
                </transition>
                <div class="editor-field-info">
                   <div>
-                     <b>{{ $t('word.size') }}</b>: {{ editingContent.length | formatBytes }}<br>
+                     <b>{{ $t('word.size') }}</b>: {{ formatBytes(editingContent.length) }}<br>
                      <b>{{ $t('word.mimeType') }}</b>: {{ contentInfo.mime }}
                   </div>
                   <div><b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}</div>
@@ -236,58 +236,6 @@ export default {
    directives: {
       mask: VueMaskDirective
    },
-   filters: {
-      formatBytes,
-      cutText (val) {
-         if (typeof val !== 'string') return val;
-         return val.length > 128 ? `${val.substring(0, 128)}[...]` : val;
-      },
-      typeFormat (val, type, precision) {
-         if (!val) return val;
-
-         type = type.toUpperCase();
-
-         if (DATE.includes(type))
-            return moment(val).isValid() ? moment(val).format('YYYY-MM-DD') : val;
-
-         if (DATETIME.includes(type)) {
-            if (typeof val === 'string')
-               return val;
-
-            let datePrecision = '';
-            for (let i = 0; i < precision; i++)
-               datePrecision += i === 0 ? '.S' : 'S';
-
-            return moment(val).isValid() ? moment(val).format(`YYYY-MM-DD HH:mm:ss${datePrecision}`) : val;
-         }
-
-         if (BLOB.includes(type)) {
-            const buff = Buffer.from(val);
-            if (!buff.length) return '';
-
-            const hex = buff.toString('hex').substring(0, 8).toUpperCase();
-            return `${mimeFromHex(hex).mime} (${formatBytes(buff.length)})`;
-         }
-
-         if (BIT.includes(type)) {
-            if (typeof val === 'number') val = [val];
-            const hex = Buffer.from(val).toString('hex');
-            const bitString = hexToBinary(hex);
-            return parseInt(bitString).toString().padStart(precision, '0');
-         }
-
-         if (ARRAY.includes(type)) {
-            if (Array.isArray(val))
-               return JSON.stringify(val).replaceAll('[', '{').replaceAll(']', '}');
-            return val;
-         }
-
-         if (SPATIAL.includes(type))
-            return val;
-
-         return typeof val === 'object' ? JSON.stringify(val) : val;
-      }
-   },
    props: {
       row: Object,
       fields: Object,
@@ -449,15 +397,15 @@ export default {
 
          window.addEventListener('keydown', this.onKey);
 
-         const type = this.fields[field].type.toUpperCase(); ;
-         this.originalContent = this.$options.filters.typeFormat(content, type, this.fields[field].length);
+         const type = this.fields[field].type.toUpperCase();
+         this.originalContent = this.typeFormat(content, type, this.fields[field].length);
          this.editingType = type;
          this.editingField = field;
          this.editingLength = this.fields[field].length;
 
          if ([...LONG_TEXT, ...ARRAY, ...TEXT_SEARCH].includes(type)) {
             this.isTextareaEditor = true;
-            this.editingContent = this.$options.filters.typeFormat(content, type);
+            this.editingContent = this.typeFormat(content, type);
             return;
          }
 
@@ -465,7 +413,7 @@ export default {
             if (content) {
                this.isMultiSpatial = IS_MULTI_SPATIAL.includes(type);
                this.isMapModal = true;
-               this.editingContent = this.$options.filters.typeFormat(content, type);
+               this.editingContent = this.typeFormat(content, type);
             }
             return;
          }
@@ -513,7 +461,7 @@ export default {
                   this.editingContent = this.editingContent.slice(0, -1);
             }
 
-            if (this.editingContent === this.$options.filters.typeFormat(this.originalContent, this.editingType, this.editingLength)) return;// If not changed
+            if (this.editingContent === this.typeFormat(this.originalContent, this.editingType, this.editingLength)) return;// If not changed
 
             content = this.editingContent;
          }
@@ -590,6 +538,56 @@ export default {
             this.editingField = null;
             window.removeEventListener('keydown', this.onKey);
          }
+      },
+      formatBytes,
+      cutText (val) {
+         if (typeof val !== 'string') return val;
+         return val.length > 128 ? `${val.substring(0, 128)}[...]` : val;
+      },
+      typeFormat (val, type, precision) {
+         if (!val) return val;
+
+         type = type.toUpperCase();
+
+         if (DATE.includes(type))
+            return moment(val).isValid() ? moment(val).format('YYYY-MM-DD') : val;
+
+         if (DATETIME.includes(type)) {
+            if (typeof val === 'string')
+               return val;
+
+            let datePrecision = '';
+            for (let i = 0; i < precision; i++)
+               datePrecision += i === 0 ? '.S' : 'S';
+
+            return moment(val).isValid() ? moment(val).format(`YYYY-MM-DD HH:mm:ss${datePrecision}`) : val;
+         }
+
+         if (BLOB.includes(type)) {
+            const buff = Buffer.from(val);
+            if (!buff.length) return '';
+
+            const hex = buff.toString('hex').substring(0, 8).toUpperCase();
+            return `${mimeFromHex(hex).mime} (${formatBytes(buff.length)})`;
+         }
+
+         if (BIT.includes(type)) {
+            if (typeof val === 'number') val = [val];
+            const hex = Buffer.from(val).toString('hex');
+            const bitString = hexToBinary(hex);
+            return parseInt(bitString).toString().padStart(precision, '0');
+         }
+
+         if (ARRAY.includes(type)) {
+            if (Array.isArray(val))
+               return JSON.stringify(val).replaceAll('[', '{').replaceAll(']', '}');
+            return val;
+         }
+
+         if (SPATIAL.includes(type))
+            return val;
+
+         return typeof val === 'object' ? JSON.stringify(val) : val;
       }
    }
 };
diff --git a/src/renderer/components/WorkspaceTabTable.vue b/src/renderer/components/WorkspaceTabTable.vue
index ccf83690..1ed489f0 100644
--- a/src/renderer/components/WorkspaceTabTable.vue
+++ b/src/renderer/components/WorkspaceTabTable.vue
@@ -117,14 +117,14 @@
                   <i class="mdi mdi-timer-sand mdi-rotate-180 pr-1" /> <b>{{ results[0].duration / 1000 }}s</b>
                </div>
                <div v-if="results.length && results[0].rows">
-                  {{ $t('word.results') }}: <b>{{ results[0].rows.length | localeString }}</b>
+                  {{ $t('word.results') }}: <b>{{ localeString(results[0].rows.length) }}</b>
                </div>
                <div v-if="hasApproximately || (page > 1 && approximateCount)">
                   {{ $t('word.total') }}: <b
                      :title="!customizations.tableRealCount ? $t('word.approximately') : ''"
                   >
                      <span v-if="!customizations.tableRealCount">≈</span>
-                     {{ approximateCount | localeString }}
+                     {{ localeString(approximateCount) }}
                   </b>
                </div>
                <div class="d-flex" :title="$t('word.schema')">
@@ -194,12 +194,6 @@ export default {
       ModalNewTableRow,
       ModalFakerRows
    },
-   filters: {
-      localeString (val) {
-         if (val !== null)
-            return val.toLocaleString();
-      }
-   },
    mixins: [tableTabs],
    props: {
       connection: Object,
@@ -310,7 +304,7 @@ export default {
       this.getTableData();
       window.addEventListener('keydown', this.onKey);
    },
-   beforeDestroy () {
+   beforeUnmount () {
       window.removeEventListener('keydown', this.onKey);
       clearInterval(this.refreshInterval);
    },
@@ -335,8 +329,8 @@ export default {
             table: this.table,
             limit: this.limit,
             page: this.page,
-            sortParams: this.sortParams,
-            where: this.filters || []
+            sortParams: { ...this.sortParams },
+            where: [...this.filters] || []
          };
 
          try { // Table data
@@ -458,6 +452,10 @@ export default {
       updateFilters (clausoles) {
          this.filters = clausoles;
          this.getTableData();
+      },
+      localeString (val) {
+         if (val !== null)
+            return val.toLocaleString();
       }
    }
 };
diff --git a/src/renderer/composables/useResultTables.js b/src/renderer/composables/useResultTables.js
new file mode 100644
index 00000000..0eeb2d6a
--- /dev/null
+++ b/src/renderer/composables/useResultTables.js
@@ -0,0 +1,64 @@
+// TODO: unfinished
+import Tables from '@/ipc-api/Tables';
+import { ref } from 'vue';
+
+export default function useResultTables (uid, reloadTable, addNotification) {
+   const tableRef = ref(null);
+   const isQuering = ref(false);
+
+   async function updateField (payload) {
+      isQuering.value = true;
+
+      const params = {
+         uid: uid,
+         ...payload
+      };
+
+      try {
+         const { status, response } = await Tables.updateTableCell(params);
+         if (status === 'success') {
+            if (response.reload)// Needed for blob fields
+               reloadTable();
+            else
+               tableRef.applyUpdate(payload);
+         }
+         else
+            addNotification({ status: 'error', message: response });
+      }
+      catch (err) {
+         addNotification({ status: 'error', message: err.stack });
+      }
+
+      isQuering.value = false;
+   }
+
+   async function deleteSelected (payload) {
+      isQuering.value = true;
+
+      const params = {
+         uid: uid,
+         ...payload
+      };
+
+      try {
+         const { status, response } = await Tables.deleteTableRows(params);
+         isQuering.value = false;
+
+         if (status === 'success')
+            reloadTable();
+         else
+            this.addNotification({ status: 'error', message: response });
+      }
+      catch (err) {
+         this.addNotification({ status: 'error', message: err.stack });
+         isQuering.value = false;
+      }
+   }
+
+   return {
+      tableRef,
+      isQuering,
+      updateField,
+      deleteSelected
+   };
+}
diff --git a/src/renderer/i18n/index.js b/src/renderer/i18n/index.js
index dd3ce1b1..19441c4d 100644
--- a/src/renderer/i18n/index.js
+++ b/src/renderer/i18n/index.js
@@ -1,9 +1,7 @@
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
+import { createI18n } from 'vue-i18n/dist/vue-i18n.esm-bundler.js';// NOTES: temporary fix to compile error
 
-Vue.use(VueI18n);
-
-const i18n = new VueI18n({
+const i18n = locale => createI18n({
+   locale,
    messages: {
       'en-US': require('./en-US'),
       'it-IT': require('./it-IT'),
diff --git a/src/renderer/index.js b/src/renderer/index.js
index 717f39a5..ff7b2184 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -1,20 +1,15 @@
 'use strict';
-
-import Vue from 'vue';
+import { createApp } from 'vue';
 
 import '@mdi/font/css/materialdesignicons.css';
 import 'leaflet/dist/leaflet.css';
 import '@/scss/main.scss';
 
 import App from '@/App.vue';
-import store from '@/store';
+import { store } from '@/store';
 import i18n from '@/i18n';
 
-i18n.locale = store.state.settings.locale;
-Vue.config.productionTip = false;
-
-new Vue({
-   render: h => h(App),
-   store,
-   i18n
-}).$mount('#app');
+const app = createApp(App);
+app.use(store);
+app.use(i18n(store.state.settings.locale));
+app.mount('#app');
diff --git a/src/renderer/ipc-api/Connection.js b/src/renderer/ipc-api/Connection.js
index 12f1ccce..d601cc63 100644
--- a/src/renderer/ipc-api/Connection.js
+++ b/src/renderer/ipc-api/Connection.js
@@ -6,12 +6,12 @@ import connStringConstruct from '../libs/connStringDecode';
 export default class {
    static makeTest (params) {
       params = connStringConstruct(params);
-      return ipcRenderer.invoke('test-connection', params);
+      return ipcRenderer.invoke('test-connection', { ...params });
    }
 
    static connect (params) {
       params = connStringConstruct(params);
-      return ipcRenderer.invoke('connect', params);
+      return ipcRenderer.invoke('connect', { ...params });
    }
 
    static checkConnection (uid) {
diff --git a/src/renderer/ipc-api/Schema.js b/src/renderer/ipc-api/Schema.js
index f5ba2233..d9cfd77a 100644
--- a/src/renderer/ipc-api/Schema.js
+++ b/src/renderer/ipc-api/Schema.js
@@ -3,23 +3,23 @@ import { ipcRenderer } from 'electron';
 
 export default class {
    static createSchema (params) {
-      return ipcRenderer.invoke('create-schema', params);
+      return ipcRenderer.invoke('create-schema', { ...params });
    }
 
    static updateSchema (params) {
-      return ipcRenderer.invoke('update-schema', params);
+      return ipcRenderer.invoke('update-schema', { ...params });
    }
 
    static getDatabaseCollation (params) {
-      return ipcRenderer.invoke('get-schema-collation', params);
+      return ipcRenderer.invoke('get-schema-collation', { ...params });
    }
 
    static deleteSchema (params) {
-      return ipcRenderer.invoke('delete-schema', params);
+      return ipcRenderer.invoke('delete-schema', { ...params });
    }
 
    static getStructure (params) {
-      return ipcRenderer.invoke('get-structure', params);
+      return ipcRenderer.invoke('get-structure', { ...params });
    }
 
    static getCollations (uid) {
@@ -43,35 +43,35 @@ export default class {
    }
 
    static killProcess (params) {
-      return ipcRenderer.invoke('kill-process', params);
+      return ipcRenderer.invoke('kill-process', { ...params });
    }
 
    static killTabQuery (params) {
-      return ipcRenderer.invoke('kill-tab-query', params);
+      return ipcRenderer.invoke('kill-tab-query', { ...params });
    }
 
    static commitTab (params) {
-      return ipcRenderer.invoke('commit-tab', params);
+      return ipcRenderer.invoke('commit-tab', { ...params });
    }
 
    static rollbackTab (params) {
-      return ipcRenderer.invoke('rollback-tab', params);
+      return ipcRenderer.invoke('rollback-tab', { ...params });
    }
 
    static destroyConnectionToCommit (params) {
-      return ipcRenderer.invoke('destroy-connection-to-commit', params);
+      return ipcRenderer.invoke('destroy-connection-to-commit', { ...params });
    }
 
    static useSchema (params) {
-      return ipcRenderer.invoke('use-schema', params);
+      return ipcRenderer.invoke('use-schema', { ...params });
    }
 
    static rawQuery (params) {
-      return ipcRenderer.invoke('raw-query', params);
+      return ipcRenderer.invoke('raw-query', { ...params });
    }
 
    static export (params) {
-      return ipcRenderer.invoke('export', params);
+      return ipcRenderer.invoke('export', { ...params });
    }
 
    static abortExport () {
@@ -79,7 +79,7 @@ export default class {
    }
 
    static import (params) {
-      return ipcRenderer.invoke('import-sql', params);
+      return ipcRenderer.invoke('import-sql', { ...params });
    }
 
    static abortImport () {
diff --git a/src/renderer/ipc-api/Tables.js b/src/renderer/ipc-api/Tables.js
index 9cc9d745..3e499aed 100644
--- a/src/renderer/ipc-api/Tables.js
+++ b/src/renderer/ipc-api/Tables.js
@@ -3,66 +3,66 @@ import { ipcRenderer } from 'electron';
 
 export default class {
    static getTableColumns (params) {
-      return ipcRenderer.invoke('get-table-columns', params);
+      return ipcRenderer.invoke('get-table-columns', { ...params });
    }
 
    static getTableData (params) {
-      return ipcRenderer.invoke('get-table-data', params);
+      return ipcRenderer.invoke('get-table-data', { ...params });
    }
 
    static getTableApproximateCount (params) {
-      return ipcRenderer.invoke('get-table-count', params);
+      return ipcRenderer.invoke('get-table-count', { ...params });
    }
 
    static getTableOptions (params) {
-      return ipcRenderer.invoke('get-table-options', params);
+      return ipcRenderer.invoke('get-table-options', { ...params });
    }
 
    static getTableIndexes (params) {
-      return ipcRenderer.invoke('get-table-indexes', params);
+      return ipcRenderer.invoke('get-table-indexes', { ...params });
    }
 
    static getKeyUsage (params) {
-      return ipcRenderer.invoke('get-key-usage', params);
+      return ipcRenderer.invoke('get-key-usage', { ...params });
    }
 
    static updateTableCell (params) {
-      return ipcRenderer.invoke('update-table-cell', params);
+      return ipcRenderer.invoke('update-table-cell', { ...params });
    }
 
    static deleteTableRows (params) {
-      return ipcRenderer.invoke('delete-table-rows', params);
+      return ipcRenderer.invoke('delete-table-rows', { ...params });
    }
 
    static insertTableRows (params) {
-      return ipcRenderer.invoke('insert-table-rows', params);
+      return ipcRenderer.invoke('insert-table-rows', { ...params });
    }
 
    static insertTableFakeRows (params) {
-      return ipcRenderer.invoke('insert-table-fake-rows', params);
+      return ipcRenderer.invoke('insert-table-fake-rows', { ...params });
    }
 
    static getForeignList (params) {
-      return ipcRenderer.invoke('get-foreign-list', params);
+      return ipcRenderer.invoke('get-foreign-list', { ...params });
    }
 
    static createTable (params) {
-      return ipcRenderer.invoke('create-table', params);
+      return ipcRenderer.invoke('create-table', { ...params });
    }
 
    static alterTable (params) {
-      return ipcRenderer.invoke('alter-table', params);
+      return ipcRenderer.invoke('alter-table', { ...params });
    }
 
    static duplicateTable (params) {
-      return ipcRenderer.invoke('duplicate-table', params);
+      return ipcRenderer.invoke('duplicate-table', { ...params });
    }
 
    static truncateTable (params) {
-      return ipcRenderer.invoke('truncate-table', params);
+      return ipcRenderer.invoke('truncate-table', { ...params });
    }
 
    static dropTable (params) {
-      return ipcRenderer.invoke('drop-table', params);
+      return ipcRenderer.invoke('drop-table', { ...params });
    }
 }
diff --git a/src/renderer/store/index.js b/src/renderer/store/index.js
index 7c49ff85..264b5dfa 100644
--- a/src/renderer/store/index.js
+++ b/src/renderer/store/index.js
@@ -1,7 +1,7 @@
 'use strict';
-
-import Vue from 'vue';
-import Vuex from 'vuex';
+import { createStore } from 'vuex/dist/vuex.esm-bundler';
+// import Vue from 'vue';
+// import Vuex from 'vuex';
 
 import application from './modules/application.store';
 import settings from './modules/settings.store';
@@ -15,9 +15,9 @@ import ipcUpdates from './plugins/ipcUpdates';
 import ipcExceptions from './plugins/ipcExceptions';
 import ipcShortcuts from './plugins/ipcShortcuts';
 
-Vue.use(Vuex);
+// Vue.use(Vuex);
 
-export default new Vuex.Store({
+export const store = createStore({
    strict: true,
    modules: {
       application,
diff --git a/src/renderer/store/modules/workspaces.store.js b/src/renderer/store/modules/workspaces.store.js
index c36e220b..590bdc73 100644
--- a/src/renderer/store/modules/workspaces.store.js
+++ b/src/renderer/store/modules/workspaces.store.js
@@ -268,7 +268,7 @@ export default {
 
          persistentStore.set(uid, state.workspaces.find(workspace => workspace.uid === uid).tabs);
       },
-      RENAME_TABS (state, { uid, schema, elementName, elementType, elementNewName }) {
+      RENAME_TABS (state, { uid, schema, elementName, elementNewName }) {
          state.workspaces = state.workspaces.map(workspace => {
             if (workspace.uid === uid) {
                return {
@@ -386,7 +386,7 @@ export default {
       selectWorkspace ({ commit }, uid) {
          commit('SELECT_WORKSPACE', uid);
       },
-      async connectWorkspace ({ dispatch, commit, getters, rootGetters }, connection) {
+      async connectWorkspace ({ dispatch, commit, rootGetters }, connection) {
          commit('SET_CONNECTING', connection.uid);
 
          try {
@@ -536,7 +536,7 @@ export default {
          commit('SET_DISCONNECTED', uid);
          commit('SELECT_TAB', { uid, tab: 0 });
       },
-      addWorkspace ({ commit }, uid) {
+      async addWorkspace ({ commit }, uid) {
          const workspace = {
             uid,
             connectionStatus: 'disconnected',
@@ -552,7 +552,7 @@ export default {
             loadedSchemas: new Set()
          };
 
-         commit('ADD_WORKSPACE', workspace);
+         await commit('ADD_WORKSPACE', workspace);
       },
       changeBreadcrumbs ({ commit, getters }, payload) {
          const breadcrumbsObj = {
diff --git a/src/renderer/store/plugins/ipcShortcuts.js b/src/renderer/store/plugins/ipcShortcuts.js
index c9410357..0220899d 100644
--- a/src/renderer/store/plugins/ipcShortcuts.js
+++ b/src/renderer/store/plugins/ipcShortcuts.js
@@ -1,11 +1,11 @@
 import { ipcRenderer } from 'electron';
 
 export default store => {
-   ipcRenderer.on('toggle-preferences', (event, error) => {
+   ipcRenderer.on('toggle-preferences', () => {
       store.dispatch('application/showSettingModal', 'general');
    });
 
-   ipcRenderer.on('open-updates-preferences', (event, error) => {
+   ipcRenderer.on('open-updates-preferences', () => {
       store.dispatch('application/showSettingModal', 'update');
       ipcRenderer.send('check-for-updates');
    });
diff --git a/webpack.renderer.config.js b/webpack.renderer.config.js
index 9bb9cb8a..18cb9a68 100644
--- a/webpack.renderer.config.js
+++ b/webpack.renderer.config.js
@@ -14,7 +14,7 @@ const parsedContributors = contributors.reduce((acc, c) => {
 }, []).join(',');
 
 const externals = Object.keys(dependencies).concat(Object.keys(devDependencies));
-const isDevMode = process.env.NODE_ENV === 'development';
+const isDevMode = process.env.NODE_ENV !== 'production';
 const whiteListedModules = ['vue'];
 
 const config = {
@@ -39,9 +39,9 @@ const config = {
    externals: externals.filter((d) => !whiteListedModules.includes(d)),
    resolve: {
       alias: {
-         vue$: 'vue/dist/vue.common.js',
-         common: path.resolve(__dirname, 'src/common'),
-         '@': path.resolve(__dirname, 'src/renderer')
+         // vue$: 'vue/dist/vue.common.js',
+         '@': path.resolve(__dirname, 'src/renderer'),
+         common: path.resolve(__dirname, 'src/common')
       },
       extensions: ['', '.js', '.vue', '.json'],
       fallback: {