diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index d84ca75..1eeca0e 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -14,7 +14,9 @@ module.exports = {
     'vue/no-mutating-props': 'warn',
     'vue/no-reserved-component-names': 'warn',
     'vue/no-v-model-argument': 'off',
-    'vue/require-default-prop': 'off'
+    'vue/require-default-prop': 'off',
+    'vue/custom-event-name-casing': ['error', 'camelCase'],
+    'vue/attribute-hyphenation': ['error', 'never']
   },
   overrides: [
     {
diff --git a/src/components/CsvJsonImport/index.vue b/src/components/CsvJsonImport/index.vue
index df72779..88bde4e 100644
--- a/src/components/CsvJsonImport/index.vue
+++ b/src/components/CsvJsonImport/index.vue
@@ -1,10 +1,10 @@
 <template>
   <modal
-    :modal-id="dialogName"
+    :modalId="dialogName"
     class="dialog"
-    content-class="import-modal"
+    contentClass="import-modal"
     scrollable
-    :click-to-close="false"
+    :clickToClose="false"
   >
     <div class="dialog-header">
       {{ typeName }} import
@@ -17,7 +17,7 @@
         label="Table name"
         width="484px"
         :disabled="disableDialog"
-        :error-msg="tableNameError"
+        :errorMsg="tableNameError"
       />
       <div v-if="!isJson && !isNdJson" class="chars">
         <delimiter-selector
@@ -45,7 +45,7 @@
             The character used to escape the quote character within a field
             (e.g. "column with ""quotes"" in text").
           '
-          max-hint-width="242px"
+          maxHintWidth="242px"
           width="93px"
           :disabled="disableDialog"
           class="char-input"
diff --git a/src/components/DbUploader.vue b/src/components/DbUploader.vue
index 6154a16..c63a214 100644
--- a/src/components/DbUploader.vue
+++ b/src/components/DbUploader.vue
@@ -47,7 +47,7 @@
       ref="addCsvJson"
       :file="file"
       :db="newDb"
-      dialog-name="importFromCsvJson"
+      dialogName="importFromCsvJson"
       @cancel="cancelImport"
       @finish="finish"
     />
diff --git a/src/components/LoadingDialog.vue b/src/components/LoadingDialog.vue
index dd57c17..e134b6b 100644
--- a/src/components/LoadingDialog.vue
+++ b/src/components/LoadingDialog.vue
@@ -1,10 +1,10 @@
 <template>
   <modal
-    :modal-id="name"
+    :modalId="name"
     class="dialog"
-    :click-to-close="false"
-    :content-transition="{ name: 'loading-dialog' }"
-    :overlay-transition="{ name: 'loading-dialog' }"
+    :clickToClose="false"
+    :contentTransition="{ name: 'loading-dialog' }"
+    :overlayTransition="{ name: 'loading-dialog' }"
   >
     <div class="dialog-header">
       {{ title }}
diff --git a/src/components/SqlTable/Pager.vue b/src/components/SqlTable/Pager.vue
index 511dc4f..6d3a0ae 100644
--- a/src/components/SqlTable/Pager.vue
+++ b/src/components/SqlTable/Pager.vue
@@ -1,19 +1,19 @@
 <template>
   <paginate
     v-model="page"
-    :page-count="pageCount"
-    :page-range="5"
-    :margin-pages="1"
-    :prev-text="chevron"
-    :next-text="chevron"
-    :no-li-surround="true"
-    container-class="paginator-continer"
-    page-link-class="paginator-page-link"
-    active-class="paginator-active-page"
-    break-view-link-class="paginator-break"
-    next-link-class="paginator-next"
-    prev-link-class="paginator-prev"
-    disabled-class="paginator-disabled"
+    :pageCount="pageCount"
+    :pageRange="5"
+    :marginPages="1"
+    :prevText="chevron"
+    :nextText="chevron"
+    :noLiSurround="true"
+    containerClass="paginator-continer"
+    pageLinkClass="paginator-page-link"
+    activeClass="paginator-active-page"
+    breakViewLinkClass="paginator-break"
+    nextLinkClass="paginator-next"
+    prevLinkClass="paginator-prev"
+    disabledClass="paginator-disabled"
   />
 </template>
 
diff --git a/src/components/SqlTable/index.vue b/src/components/SqlTable/index.vue
index 5eaaad2..c2c83cf 100644
--- a/src/components/SqlTable/index.vue
+++ b/src/components/SqlTable/index.vue
@@ -62,7 +62,7 @@
       <pager
         v-show="pageCount > 1"
         v-model="currentPage"
-        :page-count="pageCount"
+        :pageCount="pageCount"
       />
     </div>
   </div>
diff --git a/src/components/TextField.vue b/src/components/TextField.vue
index 0be3e74..d3d2a43 100644
--- a/src/components/TextField.vue
+++ b/src/components/TextField.vue
@@ -9,7 +9,7 @@
         v-if="hint"
         class="hint"
         :hint="hint"
-        :max-width="maxHintWidth || '149px'"
+        :maxWidth="maxHintWidth || '149px'"
       />
     </div>
     <input
diff --git a/src/views/MainView/AppDiagnosticInfo.vue b/src/views/MainView/AppDiagnosticInfo.vue
index cbd855a..9cb1d8c 100644
--- a/src/views/MainView/AppDiagnosticInfo.vue
+++ b/src/views/MainView/AppDiagnosticInfo.vue
@@ -5,7 +5,7 @@
       src="~@/assets/images/info.svg"
       @click="$modal.show('app-info')"
     />
-    <modal modal-id="app-info" class="dialog" content-class="app-info-modal">
+    <modal modalId="app-info" class="dialog" contentClass="app-info-modal">
       <div class="dialog-header">
         App info
         <close-icon @click="$modal.hide('app-info')" />
diff --git a/src/views/MainView/Inquiries/index.vue b/src/views/MainView/Inquiries/index.vue
index 41b1f3a..893a177 100644
--- a/src/views/MainView/Inquiries/index.vue
+++ b/src/views/MainView/Inquiries/index.vue
@@ -122,7 +122,7 @@
                       <copy-icon @click="duplicateInquiry(index)" />
                       <export-icon
                         tooltip="Export inquiry to file"
-                        tooltip-position="top-left"
+                        tooltipPosition="top-left"
                         @click="exportToFile([inquiry], `${inquiry.name}.json`)"
                       />
                       <delete-icon
@@ -140,7 +140,7 @@
     </div>
 
     <!--Rename Inquiry dialog  -->
-    <modal modal-id="rename" class="dialog" content-style="width: 560px;">
+    <modal modalId="rename" class="dialog" contentStyle="width: 560px;">
       <div class="dialog-header">
         Rename inquiry
         <close-icon @click="$modal.hide('rename')" />
@@ -149,7 +149,7 @@
         <text-field
           v-model="newName"
           label="New inquiry name"
-          :error-msg="errorMsg"
+          :errorMsg="errorMsg"
           width="100%"
         />
       </div>
@@ -160,7 +160,7 @@
     </modal>
 
     <!--Delete Inquiry dialog  -->
-    <modal modal-id="delete" class="dialog" content-style="width: 480px;">
+    <modal modalId="delete" class="dialog" contentStyle="width: 480px;">
       <div class="dialog-header">
         Delete {{ deleteGroup ? 'inquiries' : 'inquiry' }}
         <close-icon @click="$modal.hide('delete')" />
diff --git a/src/views/MainView/MainMenu.vue b/src/views/MainView/MainMenu.vue
index e6da49f..78c5e04 100644
--- a/src/views/MainView/MainMenu.vue
+++ b/src/views/MainView/MainMenu.vue
@@ -25,7 +25,7 @@
     </div>
 
     <!--Save Inquiry dialog  -->
-    <modal modal-id="save" class="dialog" content-style="width: 560px;">
+    <modal modalId="save" class="dialog" contentStyle="width: 560px;">
       <div class="dialog-header">
         Save inquiry
         <close-icon @click="cancelSave" />
@@ -39,7 +39,7 @@
         <text-field
           v-model="name"
           label="Inquiry name"
-          :error-msg="errorMsg"
+          :errorMsg="errorMsg"
           width="100%"
         />
       </div>
diff --git a/src/views/MainView/Workspace/Schema/index.vue b/src/views/MainView/Workspace/Schema/index.vue
index 8b9498d..5558827 100644
--- a/src/views/MainView/Workspace/Schema/index.vue
+++ b/src/views/MainView/Workspace/Schema/index.vue
@@ -26,7 +26,7 @@
       ref="addCsvJson"
       :file="file"
       :db="$store.state.db"
-      dialog-name="addCsvJson"
+      dialogName="addCsvJson"
     />
   </div>
 </template>
diff --git a/src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue b/src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue
index 0a3d230..9fe19b5 100644
--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue
@@ -15,12 +15,12 @@
         :layout="state.layout"
         :frames="state.frames"
         :config="config"
-        :data-sources="dataSources"
-        :data-source-options="dataSourceOptions"
+        :dataSources="dataSources"
+        :dataSourceOptions="dataSourceOptions"
         :plotly="plotly"
-        :use-resize-handler="useResizeHandler"
+        :useResizeHandler="useResizeHandler"
         :debug="true"
-        :advanced-trace-type-selector="true"
+        :advancedTraceTypeSelector="true"
         @update="update"
         @render="onRender"
       />
diff --git a/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue b/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue
index f3f8c5b..16f1339 100644
--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/PivotUi/index.vue
@@ -9,11 +9,11 @@
           :options="colsToSelect"
           :disabled="colsToSelect.length === 0"
           :multiple="true"
-          :hide-selected="true"
-          :close-on-select="true"
-          :show-labels="false"
+          :hideSelected="true"
+          :closeOnSelect="true"
+          :showLabels="false"
           :max="colsToSelect.length"
-          open-direction="bottom"
+          openDirection="bottom"
           placeholder=""
         >
           <template #maxElements>
@@ -37,12 +37,12 @@
           :options="rowsToSelect"
           :disabled="rowsToSelect.length === 0"
           :multiple="true"
-          :hide-selected="true"
-          :close-on-select="true"
-          :show-labels="false"
+          :hideSelected="true"
+          :closeOnSelect="true"
+          :showLabels="false"
           :max="rowsToSelect.length"
-          :option-height="29"
-          open-direction="bottom"
+          :optionHeight="29"
+          openDirection="bottom"
           placeholder=""
         >
           <template #maxElements>
@@ -65,12 +65,12 @@
           class="sqliteviz-select short aggregator"
           :options="aggregators"
           label="name"
-          track-by="name"
-          :close-on-select="true"
-          :show-labels="false"
-          :hide-selected="true"
-          :option-height="29"
-          open-direction="bottom"
+          trackBy="name"
+          :closeOnSelect="true"
+          :showLabels="false"
+          :hideSelected="true"
+          :optionHeight="29"
+          openDirection="bottom"
           placeholder="Choose a function"
         >
           <template #noResult>
@@ -84,11 +84,11 @@
           class="sqliteviz-select aggr-arg"
           :options="keyNames"
           :disabled="keyNames.length === 0"
-          :close-on-select="true"
-          :show-labels="false"
-          :hide-selected="true"
-          :option-height="29"
-          open-direction="bottom"
+          :closeOnSelect="true"
+          :showLabels="false"
+          :hideSelected="true"
+          :optionHeight="29"
+          openDirection="bottom"
           placeholder="Choose an argument"
         />
 
@@ -98,11 +98,11 @@
           class="sqliteviz-select aggr-arg"
           :options="keyNames"
           :disabled="keyNames.length === 0"
-          :close-on-select="true"
-          :show-labels="false"
-          :hide-selected="true"
-          :option-height="29"
-          open-direction="bottom"
+          :closeOnSelect="true"
+          :showLabels="false"
+          :hideSelected="true"
+          :optionHeight="29"
+          openDirection="bottom"
           placeholder="Choose a second argument"
         />
       </div>
@@ -114,13 +114,13 @@
           class="sqliteviz-select short renderer"
           :options="renderers"
           label="name"
-          track-by="name"
-          :close-on-select="true"
-          :allow-empty="false"
-          :show-labels="false"
-          :hide-selected="true"
-          :option-height="29"
-          open-direction="bottom"
+          trackBy="name"
+          :closeOnSelect="true"
+          :allowEmpty="false"
+          :showLabels="false"
+          :hideSelected="true"
+          :optionHeight="29"
+          openDirection="bottom"
           placeholder="Choose a view"
         >
           <template #noResult>
diff --git a/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/index.vue b/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/index.vue
index 9868d31..7afa067 100644
--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/index.vue
@@ -6,7 +6,7 @@
     </div>
     <pivot-ui
       v-model="pivotOptions"
-      :key-names="columns"
+      :keyNames="columns"
       @update="$emit('update')"
     />
     <div ref="pivotOutput" class="pivot-output" />
diff --git a/src/views/MainView/Workspace/Tabs/Tab/DataView/index.vue b/src/views/MainView/Workspace/Tabs/Tab/DataView/index.vue
index 103a64e..b59a8a8 100644
--- a/src/views/MainView/Workspace/Tabs/Tab/DataView/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/DataView/index.vue
@@ -4,9 +4,9 @@
       <component
         :is="mode"
         ref="viewComponent"
-        v-model:import-to-png-enabled="importToPngEnabled"
-        v-model:import-to-svg-enabled="importToSvgEnabled"
-        :init-options="mode === initMode ? initOptions : undefined"
+        v-model:importToPngEnabled="importToPngEnabled"
+        v-model:importToSvgEnabled="importToSvgEnabled"
+        :initOptions="mode === initMode ? initOptions : undefined"
         :data-sources="dataSource"
         @loading-image-completed="loadingImage = false"
         @update="$emit('update')"
@@ -16,7 +16,7 @@
       <icon-button
         :active="mode === 'chart'"
         tooltip="Switch to chart"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="mode = 'chart'"
       >
         <chart-icon />
@@ -25,7 +25,7 @@
         ref="pivotBtn"
         :active="mode === 'pivot'"
         tooltip="Switch to pivot"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="mode = 'pivot'"
       >
         <pivot-icon />
@@ -37,7 +37,7 @@
         :disabled="!importToPngEnabled || loadingImage"
         :loading="loadingImage"
         tooltip="Save as PNG image"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="saveAsPng"
       >
         <png-icon />
@@ -46,7 +46,7 @@
         ref="svgExportBtn"
         :disabled="!importToSvgEnabled"
         tooltip="Save as SVG"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="saveAsSvg"
       >
         <export-to-svg-icon />
@@ -55,7 +55,7 @@
       <icon-button
         ref="htmlExportBtn"
         tooltip="Save as HTML"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="saveAsHtml"
       >
         <HtmlIcon />
@@ -64,7 +64,7 @@
         ref="copyToClipboardBtn"
         :loading="copyingImage"
         tooltip="Copy visualisation to clipboard"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="prepareCopy"
       >
         <clipboard-icon />
@@ -72,9 +72,9 @@
     </side-tool-bar>
 
     <loading-dialog
-      loading-msg="Rendering the visualisation..."
-      success-msg="Image is ready"
-      action-btn-name="Copy"
+      loadingMsg="Rendering the visualisation..."
+      successMsg="Image is ready"
+      actionBtnName="Copy"
       name="prepareCopy"
       title="Copy to clipboard"
       :loading="preparingCopy"
diff --git a/src/views/MainView/Workspace/Tabs/Tab/RunResult/Record/RowNavigator.vue b/src/views/MainView/Workspace/Tabs/Tab/RunResult/Record/RowNavigator.vue
index 5e5fe06..09c9b12 100644
--- a/src/views/MainView/Workspace/Tabs/Tab/RunResult/Record/RowNavigator.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/RunResult/Record/RowNavigator.vue
@@ -3,7 +3,7 @@
     <icon-button
       :disabled="modelValue === 0"
       tooltip="First row"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       class="first"
       @click="$emit('update:modelValue', 0)"
     >
@@ -12,7 +12,7 @@
     <icon-button
       :disabled="modelValue === 0"
       tooltip="Previous row"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       class="prev"
       @click="$emit('update:modelValue', modelValue - 1)"
     >
@@ -21,7 +21,7 @@
     <icon-button
       :disabled="modelValue === total - 1"
       tooltip="Next row"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       class="next"
       @click="$emit('update:modelValue', modelValue + 1)"
     >
@@ -30,7 +30,7 @@
     <icon-button
       :disabled="modelValue === total - 1"
       tooltip="Last row"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       class="last"
       @click="$emit('update:modelValue', total - 1)"
     >
diff --git a/src/views/MainView/Workspace/Tabs/Tab/RunResult/index.vue b/src/views/MainView/Workspace/Tabs/Tab/RunResult/index.vue
index 4d01950..e4d5518 100644
--- a/src/views/MainView/Workspace/Tabs/Tab/RunResult/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/RunResult/index.vue
@@ -21,7 +21,7 @@
         <div class="value-viewer-container">
           <value-viewer
             v-show="selectedCell"
-            :cell-value="
+            :cellValue="
               selectedCell
                 ? result.values[result.columns[selectedCell.dataset.col]][
                     selectedCell.dataset.row
@@ -40,7 +40,7 @@
       <icon-button
         :disabled="!result"
         tooltip="Export result set to CSV file"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="exportToCsv"
       >
         <export-to-csv-icon />
@@ -50,7 +50,7 @@
         ref="copyToClipboardBtn"
         :disabled="!result"
         tooltip="Copy result set to clipboard"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="prepareCopy"
       >
         <clipboard-icon />
@@ -60,7 +60,7 @@
         ref="rowBtn"
         :disabled="!result"
         tooltip="View record"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         :active="viewRecord"
         @click="toggleViewRecord"
       >
@@ -71,7 +71,7 @@
         ref="viewCellValueBtn"
         :disabled="!result"
         tooltip="View value"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         :active="viewValuePanelVisible"
         @click="toggleViewValuePanel"
       >
@@ -80,9 +80,9 @@
     </side-tool-bar>
 
     <loading-dialog
-      loading-msg="Building CSV..."
-      success-msg="CSV is ready"
-      action-btn-name="Copy"
+      loadingMsg="Building CSV..."
+      successMsg="CSV is ready"
+      actionBtnName="Copy"
       name="prepareCSVCopy"
       title="Copy to clipboard"
       :loading="preparingCopy"
@@ -113,9 +113,9 @@
           v-if="result && !viewRecord"
           :data-set="result"
           :time="time"
-          :page-size="pageSize"
+          :pageSize="pageSize"
           :page="defaultPage"
-          :selected-cell-coordinates="defaultSelectedCell"
+          :selectedCellCoordinates="defaultSelectedCell"
           class="straight"
           @update-selected-cell="onUpdateSelectedCell"
         />
@@ -125,8 +125,8 @@
           ref="recordView"
           :data-set="result"
           :time="time"
-          :selected-column-index="selectedCell ? +selectedCell.dataset.col : 0"
-          :row-index="selectedCell ? +selectedCell.dataset.row : 0"
+          :selectedColumnIndex="selectedCell ? +selectedCell.dataset.col : 0"
+          :rowIndex="selectedCell ? +selectedCell.dataset.row : 0"
           @update-selected-cell="onUpdateSelectedCell"
         />
       </div>
diff --git a/src/views/MainView/Workspace/Tabs/Tab/SideToolBar.vue b/src/views/MainView/Workspace/Tabs/Tab/SideToolBar.vue
index 10e9881..26217c0 100644
--- a/src/views/MainView/Workspace/Tabs/Tab/SideToolBar.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/SideToolBar.vue
@@ -4,7 +4,7 @@
       ref="sqlEditorBtn"
       :active="panel === 'sqlEditor'"
       tooltip="Switch panel to SQL editor"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       @click="$emit('switchTo', 'sqlEditor')"
     >
       <sql-editor-icon />
@@ -14,7 +14,7 @@
       ref="tableBtn"
       :active="panel === 'table'"
       tooltip="Switch panel to result set"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       @click="$emit('switchTo', 'table')"
     >
       <table-icon />
@@ -24,7 +24,7 @@
       ref="dataViewBtn"
       :active="panel === 'dataView'"
       tooltip="Switch panel to data view"
-      tooltip-position="top-left"
+      tooltipPosition="top-left"
       @click="$emit('switchTo', 'dataView')"
     >
       <data-view-icon />
diff --git a/src/views/MainView/Workspace/Tabs/Tab/SqlEditor/index.vue b/src/views/MainView/Workspace/Tabs/Tab/SqlEditor/index.vue
index d3df1ce..ffb4e08 100644
--- a/src/views/MainView/Workspace/Tabs/Tab/SqlEditor/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/SqlEditor/index.vue
@@ -5,7 +5,7 @@
         ref="cm"
         v-model:value="query"
         :options="cmOptions"
-        :original-style="true"
+        :originalStyle="true"
         @change="onChange"
       />
     </div>
@@ -15,7 +15,7 @@
         :disabled="runDisabled"
         :loading="isGettingResults"
         tooltip="Run SQL query"
-        tooltip-position="top-left"
+        tooltipPosition="top-left"
         @click="$emit('run')"
       >
         <run-icon :disabled="runDisabled" />
diff --git a/src/views/MainView/Workspace/Tabs/Tab/index.vue b/src/views/MainView/Workspace/Tabs/Tab/index.vue
index dc7cf66..c459167 100644
--- a/src/views/MainView/Workspace/Tabs/Tab/index.vue
+++ b/src/views/MainView/Workspace/Tabs/Tab/index.vue
@@ -25,7 +25,7 @@
       <sql-editor
         ref="sqlEditor"
         v-model="tab.query"
-        :is-getting-results="tab.isGettingResults"
+        :isGettingResults="tab.isGettingResults"
         @switch-to="onSwitchView('sqlEditor', $event)"
         @run="tab.execute()"
       />
@@ -39,7 +39,7 @@
       <run-result
         :tab="tab"
         :result="tab.result"
-        :is-getting-results="tab.isGettingResults"
+        :isGettingResults="tab.isGettingResults"
         :error="tab.error"
         :time="tab.time"
         @switch-to="onSwitchView('table', $event)"
@@ -54,8 +54,8 @@
       <data-view
         ref="dataView"
         :data-source="(tab.result && tab.result.values) || null"
-        :init-options="tab.viewOptions"
-        :init-mode="tab.viewType"
+        :initOptions="tab.viewOptions"
+        :initMode="tab.viewType"
         @switch-to="onSwitchView('dataView', $event)"
         @update="onDataViewUpdate"
       />
diff --git a/src/views/MainView/Workspace/Tabs/index.vue b/src/views/MainView/Workspace/Tabs/index.vue
index 72cd3ba..e731f00 100644
--- a/src/views/MainView/Workspace/Tabs/index.vue
+++ b/src/views/MainView/Workspace/Tabs/index.vue
@@ -29,7 +29,7 @@
     </div>
 
     <!--Close tab warning dialog  -->
-    <modal modal-id="close-warn" class="dialog" content-style="width: 560px;">
+    <modal modalId="close-warn" class="dialog" contentStyle="width: 560px;">
       <div class="dialog-header">
         Close tab
         {{