diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 4ac87aa0d..f91def1e5 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -4,6 +4,8 @@ require('@rushstack/eslint-patch/modern-module-resolution');
 module.exports = {
   root: true,
   extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:vue/vue3-strongly-recommended',
     'plugin:vue/vue3-essential',
     'eslint:recommended',
     '@vue/eslint-config-typescript',
@@ -12,4 +14,7 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 'latest',
   },
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
 };
diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml
index 61d94181d..748c5c06e 100644
--- a/.github/workflows/linting.yml
+++ b/.github/workflows/linting.yml
@@ -15,4 +15,4 @@ jobs:
       - name: Install npm dependencies
         run: yarn install
       - name: Lint
-        run: yarn workspace oxd-components lint
+        run: yarn lint
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
index 1861c2a0d..add6ddc7d 100644
--- a/.github/workflows/storybook.yml
+++ b/.github/workflows/storybook.yml
@@ -15,4 +15,4 @@ jobs:
       - name: Install npm dependencies
         run: yarn install
       - name: Build Storybook
-        run: yarn workspace oxd-storybook build
+        run: yarn build:storybook
diff --git a/.github/workflows/unit-tests.yml b/.github/workflows/unit-tests.yml
index 088ac9413..ac67c1877 100644
--- a/.github/workflows/unit-tests.yml
+++ b/.github/workflows/unit-tests.yml
@@ -17,7 +17,7 @@ jobs:
         run: yarn install
 
       - name: Unit tests
-        run: yarn workspace oxd-components test:unit --coverage
+        run: yarn test:unit --coverage
 
       - name: Upload jest coverage
         uses: actions/upload-artifact@v3
diff --git a/.gitignore b/.gitignore
index 718af65c7..290b74f7d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Coverage report
+src/coverage/*
diff --git a/package.json b/package.json
index 67f592989..845ea4d8b 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "@types/jsdom": "^20.0.1",
     "@types/node": "^18.11.12",
     "@vitejs/plugin-vue": "^4.0.0",
+    "@vitest/coverage-c8": "^0.27.1",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/test-utils": "^2.2.6",
diff --git a/src/components/Alert/stories/AlertContainer.vue b/src/components/Alert/stories/AlertContainer.vue
index 1b307415e..75de3148d 100644
--- a/src/components/Alert/stories/AlertContainer.vue
+++ b/src/components/Alert/stories/AlertContainer.vue
@@ -28,10 +28,10 @@
     >
       <oxd-button
         size="medium"
-        displayType="ghost-success"
+        display-type="ghost-success"
         label="No, Cancel"
       />
-      <oxd-button size="medium" displayType="success" label="Yes, Delete" />
+      <oxd-button size="medium" display-type="success" label="Yes, Delete" />
     </oxd-alert>
 
     <oxd-alert
@@ -39,8 +39,8 @@
       type="warn"
       message="Are you sure you want to continue?"
     >
-      <oxd-button size="medium" displayType="ghost-warn" label="No, Cancel" />
-      <oxd-button size="medium" displayType="warn" label="Yes, Delete" />
+      <oxd-button size="medium" display-type="ghost-warn" label="No, Cancel" />
+      <oxd-button size="medium" display-type="warn" label="Yes, Delete" />
     </oxd-alert>
 
     <oxd-alert
@@ -48,8 +48,12 @@
       type="error"
       message="Are you sure you want to continue?"
     >
-      <oxd-button size="medium" displayType="ghost-danger" label="No, Cancel" />
-      <oxd-button size="medium" displayType="danger" label="Yes, Delete" />
+      <oxd-button
+        size="medium"
+        display-type="ghost-danger"
+        label="No, Cancel"
+      />
+      <oxd-button size="medium" display-type="danger" label="Yes, Delete" />
     </oxd-alert>
 
     <oxd-alert
@@ -57,8 +61,8 @@
       type="info"
       message="Are you sure you want to continue?"
     >
-      <oxd-button size="medium" displayType="ghost-info" label="No, Cancel" />
-      <oxd-button size="medium" displayType="info" label="Yes, Delete" />
+      <oxd-button size="medium" display-type="ghost-info" label="No, Cancel" />
+      <oxd-button size="medium" display-type="info" label="Yes, Delete" />
     </oxd-alert>
   </div>
 </template>
@@ -68,7 +72,7 @@ import Alert from '@/components/Alert/Alert.vue';
 import Button from '@/components/Button/Button.vue';
 
 export default {
-  name: 'alert-container-example',
+  name: 'AlertContainerExample',
   components: {
     'oxd-alert': Alert,
     'oxd-button': Button,
diff --git a/src/components/CardTable/stories/ActionCardTable.story.vue b/src/components/CardTable/stories/ActionCardTable.story.vue
index f9dbbf251..34151a0d0 100644
--- a/src/components/CardTable/stories/ActionCardTable.story.vue
+++ b/src/components/CardTable/stories/ActionCardTable.story.vue
@@ -22,13 +22,13 @@
 
 <template>
   <oxd-card-table
+    v-model:selected="checkedItems"
     :selector="selector"
     :headers="headers"
     :items="items"
-    @click="onClick"
     :selectable="true"
-    v-model:selected="checkedItems"
-    rowDecorator="oxd-table-decorator-card"
+    row-decorator="oxd-table-decorator-card"
+    @click="onClick"
   />
 </template>
 
@@ -36,6 +36,9 @@
 import CardTable from '@/components/CardTable/CardTable.vue';
 
 export default {
+  components: {
+    'oxd-card-table': CardTable,
+  },
   data() {
     return {
       selector: {
@@ -102,10 +105,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-card-table': CardTable,
-  },
-
   methods: {
     onClick(e) {
       console.log(e);
diff --git a/src/components/CardTable/stories/CardTable.story.vue b/src/components/CardTable/stories/CardTable.story.vue
index d7f13ad22..b0a4a955e 100644
--- a/src/components/CardTable/stories/CardTable.story.vue
+++ b/src/components/CardTable/stories/CardTable.story.vue
@@ -23,16 +23,16 @@
 <template>
   <div class="orangehrm-container">
     <oxd-card-table
+      v-model:selected="checkedItems"
       :selector="selector"
       :headers="headers"
       :items="items"
-      @click="onClick"
       :selectable="selectable"
       :disabled="disabled"
       :clickable="false"
       :loading="isLoading"
-      v-model:selected="checkedItems"
-      rowDecorator="oxd-table-decorator-card"
+      row-decorator="oxd-table-decorator-card"
+      @click="onClick"
     />
   </div>
 </template>
@@ -41,6 +41,18 @@
 import CardTable from '@/components/CardTable/CardTable.vue';
 
 export default {
+  components: {
+    'oxd-card-table': CardTable,
+  },
+
+  props: {
+    selectable: {
+      type: Boolean,
+    },
+    disabled: {
+      type: Boolean,
+    },
+  },
   data() {
     return {
       selector: {
@@ -56,25 +68,6 @@ export default {
     };
   },
 
-  props: {
-    selectable: {
-      type: Boolean,
-    },
-    disabled: {
-      type: Boolean,
-    },
-  },
-
-  components: {
-    'oxd-card-table': CardTable,
-  },
-
-  methods: {
-    onClick(e) {
-      console.log(e);
-    },
-  },
-
   created() {
     this.isLoading = true;
     // simulate async data fetch
@@ -90,6 +83,12 @@ export default {
       this.isLoading = false;
     }, 2000);
   },
+
+  methods: {
+    onClick(e) {
+      console.log(e);
+    },
+  },
 };
 </script>
 
diff --git a/src/components/CardTable/stories/CardTableJobs.story.vue b/src/components/CardTable/stories/CardTableJobs.story.vue
index 2b56061e5..a8f1a50ec 100644
--- a/src/components/CardTable/stories/CardTableJobs.story.vue
+++ b/src/components/CardTable/stories/CardTableJobs.story.vue
@@ -23,14 +23,14 @@
 <template>
   <div class="orangehrm-container">
     <oxd-card-table
+      v-model:selected="checkedItems"
       :selector="selector"
       :headers="headers"
       :items="items"
-      @click="onClick"
       :selectable="true"
       :clickable="false"
-      v-model:selected="checkedItems"
-      rowDecorator="oxd-table-decorator-card"
+      row-decorator="oxd-table-decorator-card"
+      @click="onClick"
     />
   </div>
 </template>
@@ -39,6 +39,9 @@
 import CardTable from '@/components/CardTable/CardTable.vue';
 
 export default {
+  components: {
+    'oxd-card-table': CardTable,
+  },
   data() {
     return {
       selector: {
@@ -101,10 +104,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-card-table': CardTable,
-  },
-
   methods: {
     onClick(e) {
       console.log(e);
diff --git a/src/components/CardTable/stories/CardTableLangStringList.story.vue b/src/components/CardTable/stories/CardTableLangStringList.story.vue
index 943854fc0..a9da1c49e 100644
--- a/src/components/CardTable/stories/CardTableLangStringList.story.vue
+++ b/src/components/CardTable/stories/CardTableLangStringList.story.vue
@@ -34,7 +34,7 @@
       :items="items"
       :selectable="false"
       :clickable="false"
-      rowDecorator="oxd-table-decorator-card"
+      row-decorator="oxd-table-decorator-card"
     />
   </div>
   <div class="orangehrm-table-footer"></div>
@@ -46,6 +46,10 @@ import Button from '@/components/Button/Button.vue';
 import CardTable from '@/components/CardTable/CardTable.vue';
 
 export default {
+  components: {
+    'oxd-button': Button,
+    'oxd-card-table': CardTable,
+  },
   data() {
     return {
       headers: [
@@ -113,11 +117,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-button': Button,
-    'oxd-card-table': CardTable,
-  },
-
   methods: {
     actionsRenderer(index, item, header, row) {
       const edit = {
diff --git a/src/components/CardTable/stories/CardTableLeavelist.story.vue b/src/components/CardTable/stories/CardTableLeavelist.story.vue
index 507bfc0ed..32a5d67cd 100644
--- a/src/components/CardTable/stories/CardTableLeavelist.story.vue
+++ b/src/components/CardTable/stories/CardTableLeavelist.story.vue
@@ -23,13 +23,13 @@
 <template>
   <div class="orangehrm-container">
     <oxd-card-table
+      v-model:selected="checkedItems"
       :selector="selector"
       :headers="headers"
       :items="items"
       :selectable="true"
       :clickable="false"
-      v-model:selected="checkedItems"
-      rowDecorator="oxd-table-decorator-card"
+      row-decorator="oxd-table-decorator-card"
     />
   </div>
 </template>
@@ -38,6 +38,9 @@
 import CardTable from '@/components/CardTable/CardTable.vue';
 
 export default {
+  components: {
+    'oxd-card-table': CardTable,
+  },
   data() {
     return {
       headers: [
@@ -94,10 +97,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-card-table': CardTable,
-  },
-
   methods: {
     cellRenderer(index, item, header, row) {
       const accept = {
diff --git a/src/components/CardTable/stories/CardTableLeavelistAlt.story.vue b/src/components/CardTable/stories/CardTableLeavelistAlt.story.vue
index f6ea8ff54..bc4029f76 100644
--- a/src/components/CardTable/stories/CardTableLeavelistAlt.story.vue
+++ b/src/components/CardTable/stories/CardTableLeavelistAlt.story.vue
@@ -22,13 +22,13 @@
 <template>
   <div class="orangehrm-container">
     <oxd-card-table
+      v-model:selected="checkedItems"
       :selector="selector"
       :headers="headers"
       :items="items"
       :selectable="true"
       :clickable="false"
-      v-model:selected="checkedItems"
-      rowDecorator="oxd-table-decorator-card"
+      row-decorator="oxd-table-decorator-card"
     />
   </div>
 </template>
@@ -39,6 +39,9 @@ import Textarea from '@/components/Input/Textarea/Textarea.vue';
 import SelectInput from '@/components/Input/Select/SelectInput.vue';
 
 export default {
+  components: {
+    'oxd-card-table': CardTable,
+  },
   data() {
     return {
       headers: [
@@ -99,10 +102,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-card-table': CardTable,
-  },
-
   methods: {
     actionsRenderer() {
       return {
diff --git a/src/components/CardTable/stories/CardTableRowOptions.story.vue b/src/components/CardTable/stories/CardTableRowOptions.story.vue
index e03d4d693..57c6afe50 100644
--- a/src/components/CardTable/stories/CardTableRowOptions.story.vue
+++ b/src/components/CardTable/stories/CardTableRowOptions.story.vue
@@ -18,20 +18,19 @@
  * along with this program.  If not, see  http://www.gnu.org/licenses
  */
 -->
--->
 
 <template>
   <div class="orangehrm-container">
     <oxd-card-table
+      v-model:selected="checkedItems"
       :headers="headers"
       :items="items"
-      @click="onClick"
       :selectable="selectable"
       :disabled="disabled"
       :clickable="clickable"
       :loading="loading"
-      v-model:selected="checkedItems"
-      rowDecorator="oxd-table-decorator-card"
+      row-decorator="oxd-table-decorator-card"
+      @click="onClick"
     />
   </div>
 </template>
@@ -40,6 +39,28 @@
 import CardTable from '@/components/CardTable/CardTable.vue';
 
 export default {
+  components: {
+    'oxd-card-table': CardTable,
+  },
+
+  props: {
+    selectable: {
+      type: Boolean,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    loading: {
+      type: Boolean,
+    },
+    clickable: {
+      type: Boolean,
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
   data() {
     return {
       headers: [
@@ -67,28 +88,6 @@ export default {
     };
   },
 
-  props: {
-    selectable: {
-      type: Boolean,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    loading: {
-      type: Boolean,
-    },
-    clickable: {
-      type: Boolean,
-    },
-    items: {
-      type: Array,
-    },
-  },
-
-  components: {
-    'oxd-card-table': CardTable,
-  },
-
   methods: {
     onClick(e) {
       console.log(e);
diff --git a/src/components/CardTable/stories/CardTableSlots.story.vue b/src/components/CardTable/stories/CardTableSlots.story.vue
index 3da36f883..0a607a2f3 100644
--- a/src/components/CardTable/stories/CardTableSlots.story.vue
+++ b/src/components/CardTable/stories/CardTableSlots.story.vue
@@ -23,14 +23,14 @@
 <template>
   <div class="orangehrm-container">
     <oxd-card-table
+      v-model:selected="checkedItems"
       :selector="selector"
       :headers="headers"
       :items="items"
-      @click="onClick"
       :selectable="true"
       :clickable="false"
-      v-model:selected="checkedItems"
-      rowDecorator="oxd-table-decorator-card"
+      row-decorator="oxd-table-decorator-card"
+      @click="onClick"
     />
   </div>
   <br />
@@ -41,6 +41,9 @@
 import CardTable from '@/components/CardTable/CardTable.vue';
 
 export default {
+  components: {
+    'oxd-card-table': CardTable,
+  },
   data() {
     return {
       selector: {
@@ -84,10 +87,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-card-table': CardTable,
-  },
-
   methods: {
     onClick(e) {
       console.log(e);
diff --git a/src/components/CardTable/stories/SortableCardTable.story.vue b/src/components/CardTable/stories/SortableCardTable.story.vue
index 356437da2..0c821969d 100644
--- a/src/components/CardTable/stories/SortableCardTable.story.vue
+++ b/src/components/CardTable/stories/SortableCardTable.story.vue
@@ -23,14 +23,14 @@
 <template>
   <div class="orangehrm-container">
     <oxd-card-table
+      v-model:selected="checkedItems"
+      v-model:order="order"
       :selector="selector"
       :headers="headers"
       :items="items"
-      @click="onClick"
       :selectable="true"
-      v-model:selected="checkedItems"
-      rowDecorator="oxd-table-decorator-card"
-      v-model:order="order"
+      row-decorator="oxd-table-decorator-card"
+      @click="onClick"
     />
     <br />
     <p>{{ order }}</p>
@@ -41,6 +41,15 @@
 import CardTable from '@/components/CardTable/CardTable.vue';
 
 export default {
+  components: {
+    'oxd-card-table': CardTable,
+  },
+
+  props: {
+    selectable: {
+      type: Boolean,
+    },
+  },
   data() {
     return {
       selector: {
@@ -69,22 +78,6 @@ export default {
     };
   },
 
-  props: {
-    selectable: {
-      type: Boolean,
-    },
-  },
-
-  components: {
-    'oxd-card-table': CardTable,
-  },
-
-  methods: {
-    onClick(e) {
-      console.log(e);
-    },
-  },
-
   created() {
     // simulate async data fetch
     setTimeout(() => {
@@ -98,6 +91,12 @@ export default {
       ];
     }, 500);
   },
+
+  methods: {
+    onClick(e) {
+      console.log(e);
+    },
+  },
 };
 </script>
 
diff --git a/src/components/Chart/stories/Dashboard.story.vue b/src/components/Chart/stories/Dashboard.story.vue
index c5c02b430..5e8a0a897 100644
--- a/src/components/Chart/stories/Dashboard.story.vue
+++ b/src/components/Chart/stories/Dashboard.story.vue
@@ -56,7 +56,7 @@
             <oxd-bar-chart
               :data="timeData"
               :grid="false"
-              :yAxsis="false"
+              :y-axsis="false"
               :aspect-ratio="false"
             ></oxd-bar-chart>
           </div>
diff --git a/src/components/Dialog/stories/DialogClose.story.vue b/src/components/Dialog/stories/DialogClose.story.vue
index d237047bf..df429568e 100644
--- a/src/components/Dialog/stories/DialogClose.story.vue
+++ b/src/components/Dialog/stories/DialogClose.story.vue
@@ -31,9 +31,9 @@
     Lorem Ipsum passages, and more recently with desktop publishing software
     like Aldus PageMaker including versions of Lorem Ipsum.
   </p>
-  <oxd-icon-button name="trash" @click="onClick" withContainer />
+  <oxd-icon-button name="trash" with-container @click="onClick" />
 
-  <oxd-dialog v-if="show" @update:show="onClose" :style="{maxWidth: '800px'}">
+  <oxd-dialog v-if="show" :style="{maxWidth: '800px'}" @update:show="onClose">
     <p>
       <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting
       industry. Lorem Ipsum has been the industry's standard dummy text ever
diff --git a/src/components/Dialog/stories/DialogDeleteConfirmation.story.vue b/src/components/Dialog/stories/DialogDeleteConfirmation.story.vue
index dfe26715d..61aeb6566 100644
--- a/src/components/Dialog/stories/DialogDeleteConfirmation.story.vue
+++ b/src/components/Dialog/stories/DialogDeleteConfirmation.story.vue
@@ -21,9 +21,9 @@
 -->
 
 <template>
-  <oxd-icon-button name="trash" @click="onClick" withContainer />
+  <oxd-icon-button name="trash" with-container @click="onClick" />
 
-  <oxd-dialog v-if="show" @update:show="onCancel" :style="{maxWidth: '450px'}">
+  <oxd-dialog v-if="show" :style="{maxWidth: '450px'}" @update:show="onCancel">
     <div class="orangehrm-modal-header">
       <oxd-text type="card-title">Are you sure?</oxd-text>
     </div>
@@ -36,14 +36,14 @@
     <div class="orangehrm-modal-footer">
       <oxd-button
         label="No, Cancel"
-        displayType="text"
+        display-type="text"
         class="orangehrm-button-margin"
         @click="onCancel"
       />
       <oxd-button
         label="Yes, Delete"
-        iconName="trash"
-        displayType="label-danger"
+        icon-name="trash"
+        display-type="label-danger"
         class="orangehrm-button-margin"
         @click="onDelete"
       />
diff --git a/src/components/Dialog/stories/DialogPersistent.story.vue b/src/components/Dialog/stories/DialogPersistent.story.vue
index 271b23fbd..028a18a31 100644
--- a/src/components/Dialog/stories/DialogPersistent.story.vue
+++ b/src/components/Dialog/stories/DialogPersistent.story.vue
@@ -31,13 +31,13 @@
     Lorem Ipsum passages, and more recently with desktop publishing software
     like Aldus PageMaker including versions of Lorem Ipsum.
   </p>
-  <oxd-icon-button name="trash" @click="onClick" withContainer />
+  <oxd-icon-button name="trash" with-container @click="onClick" />
 
   <oxd-dialog
     v-if="show"
-    @update:show="onClose"
     :style="{maxWidth: '800px'}"
     v-bind="$attrs"
+    @update:show="onClose"
   >
     <p>
       <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting
diff --git a/src/components/Dialog/stories/DialogWithoutClose.story.vue b/src/components/Dialog/stories/DialogWithoutClose.story.vue
index 271b23fbd..028a18a31 100644
--- a/src/components/Dialog/stories/DialogWithoutClose.story.vue
+++ b/src/components/Dialog/stories/DialogWithoutClose.story.vue
@@ -31,13 +31,13 @@
     Lorem Ipsum passages, and more recently with desktop publishing software
     like Aldus PageMaker including versions of Lorem Ipsum.
   </p>
-  <oxd-icon-button name="trash" @click="onClick" withContainer />
+  <oxd-icon-button name="trash" with-container @click="onClick" />
 
   <oxd-dialog
     v-if="show"
-    @update:show="onClose"
     :style="{maxWidth: '800px'}"
     v-bind="$attrs"
+    @update:show="onClose"
   >
     <p>
       <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting
diff --git a/src/components/Dialog/stories/DialogWithoutTransition.story.vue b/src/components/Dialog/stories/DialogWithoutTransition.story.vue
index 1c16763af..dbcb218dd 100644
--- a/src/components/Dialog/stories/DialogWithoutTransition.story.vue
+++ b/src/components/Dialog/stories/DialogWithoutTransition.story.vue
@@ -31,13 +31,13 @@
     Lorem Ipsum passages, and more recently with desktop publishing software
     like Aldus PageMaker including versions of Lorem Ipsum.
   </p>
-  <oxd-icon-button name="trash" @click="onClick" withContainer />
+  <oxd-icon-button name="trash" with-container @click="onClick" />
 
   <oxd-dialog
     v-if="show"
-    @update:show="onClose"
-    :withTransition="false"
+    :with-transition="false"
     :style="{maxWidth: '800px'}"
+    @update:show="onClose"
   >
     <p>
       <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting
diff --git a/src/components/Form/stories/AddJobTitle.story.vue b/src/components/Form/stories/AddJobTitle.story.vue
index cc7a21732..6b12648e7 100644
--- a/src/components/Form/stories/AddJobTitle.story.vue
+++ b/src/components/Form/stories/AddJobTitle.story.vue
@@ -27,43 +27,43 @@
 
   <oxd-form>
     <oxd-form-row>
-      <oxd-input-field label="Job Title" v-model="jobTitle.title" />
+      <oxd-input-field v-model="jobTitle.title" label="Job Title" />
     </oxd-form-row>
 
     <oxd-form-row>
       <oxd-input-field
+        v-model="jobTitle.description"
         type="textarea"
         label="Job Description"
         placeholder="Type description here"
-        v-model="jobTitle.description"
       />
     </oxd-form-row>
 
     <oxd-form-row>
       <oxd-input-field
+        v-model="jobTitle.specification"
         type="file"
         label="Job Specification"
-        buttonLabel="Browse"
-        v-model="jobTitle.specification"
+        button-label="Browse"
       />
     </oxd-form-row>
 
     <oxd-form-row>
       <oxd-input-field
+        v-model="jobTitle.note"
         type="textarea"
         label="Note"
         placeholder="Add note"
-        v-model="jobTitle.note"
       />
     </oxd-form-row>
 
     <oxd-form-row>
       <oxd-input-field
+        v-model="jobTitle.consent"
         type="checkbox"
         value="1"
         label="Check this"
         option-label="I agree"
-        v-model="jobTitle.consent"
         true-value="yes"
         false-value="no"
       />
@@ -73,10 +73,10 @@
   <oxd-divider />
 
   <oxd-form-actions>
-    <oxd-button displayType="ghost" label="Cancel" />
+    <oxd-button display-type="ghost" label="Cancel" />
     <oxd-button
       class="orangehrm-left-space"
-      displayType="secondary"
+      display-type="secondary"
       label="Add"
       @click="onSave"
     />
@@ -103,12 +103,6 @@ const initialJobTitle = {
 export default {
   name: 'DefaultForm',
 
-  data() {
-    return {
-      jobTitle: {...initialJobTitle},
-    };
-  },
-
   components: {
     'oxd-form': Form,
     'oxd-form-row': FormRow,
@@ -119,6 +113,12 @@ export default {
     'oxd-text': Text,
   },
 
+  data() {
+    return {
+      jobTitle: {...initialJobTitle},
+    };
+  },
+
   methods: {
     onSave() {},
   },
diff --git a/src/components/Form/stories/AsyncValidatableForm.story.vue b/src/components/Form/stories/AsyncValidatableForm.story.vue
index dee6aafec..c2daa6b4f 100644
--- a/src/components/Form/stories/AsyncValidatableForm.story.vue
+++ b/src/components/Form/stories/AsyncValidatableForm.story.vue
@@ -25,12 +25,12 @@
 
   <oxd-divider />
 
-  <oxd-form ref="form" @submitValid="onSubmit" @submitInvalid="onInvalid">
+  <oxd-form ref="form" @submit-valid="onSubmit" @submit-invalid="onInvalid">
     <oxd-form-row>
       <oxd-input-group class="orangehrm-bottom-space">
         <oxd-input-field
-          label="Github Username (real async validation)"
           v-model="name"
+          label="Github Username (real async validation)"
           :rules="rules.name"
         />
       </oxd-input-group>
@@ -39,8 +39,8 @@
     <oxd-form-row>
       <oxd-input-group class="orangehrm-bottom-space">
         <oxd-input-field
-          label="Email (simulated slow async validation)"
           v-model="email"
+          label="Email (simulated slow async validation)"
           :rules="rules.email"
         />
       </oxd-input-group>
@@ -49,8 +49,8 @@
     <oxd-form-row>
       <oxd-input-group class="orangehrm-bottom-space">
         <oxd-input-field
-          label="Number (sync validation)"
           v-model="number"
+          label="Number (sync validation)"
           :rules="rules.number"
         />
       </oxd-input-group>
@@ -59,10 +59,10 @@
     <oxd-divider />
 
     <oxd-form-actions>
-      <oxd-button displayType="ghost" label="Cancel" />
+      <oxd-button display-type="ghost" label="Cancel" />
       <oxd-button
         class="orangehrm-left-space"
-        displayType="secondary"
+        display-type="secondary"
         label="Add"
         type="submit"
       />
@@ -120,6 +120,17 @@ const delayedFunc = function (value) {
 export default {
   name: 'ValidatableFrom',
 
+  components: {
+    'oxd-form': Form,
+    'oxd-form-row': FormRow,
+    'oxd-input-group': InputGroup,
+    'oxd-form-actions': FormActions,
+    'oxd-input-field': InputField,
+    'oxd-divider': Divider,
+    'oxd-button': Button,
+    'oxd-text': Text,
+  },
+
   setup() {
     const form = ref(null);
 
@@ -153,17 +164,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-form': Form,
-    'oxd-form-row': FormRow,
-    'oxd-input-group': InputGroup,
-    'oxd-form-actions': FormActions,
-    'oxd-input-field': InputField,
-    'oxd-divider': Divider,
-    'oxd-button': Button,
-    'oxd-text': Text,
-  },
-
   methods: {
     onSubmit(e) {
       console.log('form valid', e);
diff --git a/src/components/Form/stories/CustomLabelForm.story.vue b/src/components/Form/stories/CustomLabelForm.story.vue
index f9e6278fb..98c52b43a 100644
--- a/src/components/Form/stories/CustomLabelForm.story.vue
+++ b/src/components/Form/stories/CustomLabelForm.story.vue
@@ -32,12 +32,12 @@
 
     <oxd-form-row class="orangehrm-bottom-space">
       <oxd-input-group label="Label">
-        <template v-slot:label>
+        <template #label>
           <div>
             <b>Cu<em>stom</em></b> Label
           </div>
         </template>
-        <template v-slot:default>
+        <template #default>
           <oxd-input value="Initial Value" />
         </template>
       </oxd-input-group>
@@ -47,10 +47,10 @@
 
     <oxd-form-row class="orangehrm-bottom-space">
       <oxd-input-group label="Label">
-        <template v-slot:default>
+        <template #default>
           <oxd-input value="Initial Value" />
         </template>
-        <template v-slot:message>
+        <template #message>
           <div>Custom <b>Message</b></div>
         </template>
       </oxd-input-group>
diff --git a/src/components/Form/stories/DisableValidationForm.story.vue b/src/components/Form/stories/DisableValidationForm.story.vue
index 27602ddc6..52641bce0 100644
--- a/src/components/Form/stories/DisableValidationForm.story.vue
+++ b/src/components/Form/stories/DisableValidationForm.story.vue
@@ -24,18 +24,18 @@
 
   <oxd-divider />
 
-  <oxd-form ref="form" @submitValid="onSubmit">
+  <oxd-form ref="form" @submit-valid="onSubmit">
     <oxd-form-row>
       <oxd-input-group class="orangehrm-bottom-space">
-        <oxd-input-field label="Regular" v-model="name" :rules="rules.name" />
+        <oxd-input-field v-model="name" label="Regular" :rules="rules.name" />
       </oxd-input-group>
     </oxd-form-row>
 
     <oxd-form-row>
       <oxd-input-group class="orangehrm-bottom-space">
         <oxd-input-field
-          label="Disabled"
           v-model="name"
+          label="Disabled"
           :rules="rules.name"
           disabled
         />
@@ -45,8 +45,8 @@
     <oxd-form-row>
       <oxd-input-group class="orangehrm-bottom-space">
         <oxd-input-field
-          label="Readonly"
           v-model="name"
+          label="Readonly"
           :rules="rules.name"
           readonly
         />
@@ -56,7 +56,7 @@
     <oxd-divider />
 
     <oxd-form-actions>
-      <oxd-button displayType="secondary" label="Save" type="submit" />
+      <oxd-button display-type="secondary" label="Save" type="submit" />
     </oxd-form-actions>
   </oxd-form>
 
@@ -79,6 +79,17 @@ import Text from '@/components/Text/Text.vue';
 export default {
   name: 'ValidatableFrom',
 
+  components: {
+    'oxd-form': Form,
+    'oxd-form-row': FormRow,
+    'oxd-input-group': InputGroup,
+    'oxd-form-actions': FormActions,
+    'oxd-input-field': InputField,
+    'oxd-divider': Divider,
+    'oxd-button': Button,
+    'oxd-text': Text,
+  },
+
   setup() {
     const form = ref(null);
 
@@ -97,17 +108,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-form': Form,
-    'oxd-form-row': FormRow,
-    'oxd-input-group': InputGroup,
-    'oxd-form-actions': FormActions,
-    'oxd-input-field': InputField,
-    'oxd-divider': Divider,
-    'oxd-button': Button,
-    'oxd-text': Text,
-  },
-
   methods: {
     onSubmit(e) {
       console.log('form valid', e);
diff --git a/src/components/Form/stories/DynamicValidatableForm.story.vue b/src/components/Form/stories/DynamicValidatableForm.story.vue
index 08baad893..7c27efe38 100644
--- a/src/components/Form/stories/DynamicValidatableForm.story.vue
+++ b/src/components/Form/stories/DynamicValidatableForm.story.vue
@@ -25,23 +25,23 @@
 
   <oxd-divider />
 
-  <oxd-form @submitValid="getFormValues" ref="form">
+  <oxd-form ref="form" @submit-valid="getFormValues">
     <oxd-form-row>
       <div
-        class="orangehrm-row-item"
         v-for="(customField, index) in customFields"
         :key="index"
+        class="orangehrm-row-item"
       >
         <oxd-input-field
-          :label="`Custom Field [${index + 1}]`"
           v-model="customFields[index].name"
+          :label="`Custom Field [${index + 1}]`"
           :rules="rules.name"
         />
         <oxd-icon-button
-          @click="addField"
-          name="plus"
           v-if="index == customFields.length - 1"
+          name="plus"
           style="height: 30px; margin-left: 15px"
+          @click="addField"
         />
       </div>
     </oxd-form-row>
@@ -49,10 +49,10 @@
     <oxd-divider />
 
     <oxd-form-actions>
-      <oxd-button type="button" displayType="ghost" label="Cancel" />
+      <oxd-button type="button" display-type="ghost" label="Cancel" />
       <oxd-button
         class="orangehrm-left-space"
-        displayType="secondary"
+        display-type="secondary"
         label="Save"
         type="submit"
       />
@@ -78,6 +78,17 @@ import Text from '@/components/Text/Text.vue';
 export default {
   name: 'DynamicValidatableFrom',
 
+  components: {
+    'oxd-form': Form,
+    'oxd-form-row': FormRow,
+    'oxd-form-actions': FormActions,
+    'oxd-input-field': InputField,
+    'oxd-divider': Divider,
+    'oxd-button': Button,
+    'oxd-icon-button': IconButton,
+    'oxd-text': Text,
+  },
+
   setup() {
     const form = ref(null);
 
@@ -99,17 +110,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-form': Form,
-    'oxd-form-row': FormRow,
-    'oxd-form-actions': FormActions,
-    'oxd-input-field': InputField,
-    'oxd-divider': Divider,
-    'oxd-button': Button,
-    'oxd-icon-button': IconButton,
-    'oxd-text': Text,
-  },
-
   methods: {
     addField() {
       this.customFields.push({name: ''});
diff --git a/src/components/Form/stories/InputGroupedForm.story.vue b/src/components/Form/stories/InputGroupedForm.story.vue
index 8b9dbd6de..d81b2d95f 100644
--- a/src/components/Form/stories/InputGroupedForm.story.vue
+++ b/src/components/Form/stories/InputGroupedForm.story.vue
@@ -24,7 +24,7 @@
   <oxd-text tag="h5">Grouped Input Example</oxd-text>
 
   <oxd-divider />
-  <oxd-form @submitValid="getFormValues" ref="form">
+  <oxd-form ref="form" @submit-valid="getFormValues">
     <oxd-form-row>
       <oxd-input-group
         label="Full Name"
@@ -32,20 +32,20 @@
         :classes="{wrapper: '--grouped-field'}"
       >
         <oxd-input-field
-          class="orangehrm-firstname"
           v-model="firstname"
+          class="orangehrm-firstname"
           placeholder="First name"
           :rules="rules.firstname"
         />
         <oxd-input-field
-          class="orangehrm-middlename"
           v-model="middlename"
+          class="orangehrm-middlename"
           placeholder="Middle name"
           :rules="rules.middlename"
         />
         <oxd-input-field
-          class="orangehrm-lastname"
           v-model="lastname"
+          class="orangehrm-lastname"
           placeholder="Last name"
           :rules="rules.lastname"
         />
@@ -55,10 +55,10 @@
     <oxd-divider />
 
     <oxd-form-actions>
-      <oxd-button displayType="ghost" label="Cancel" />
+      <oxd-button display-type="ghost" label="Cancel" />
       <oxd-button
         class="orangehrm-left-space"
-        displayType="secondary"
+        display-type="secondary"
         label="Add"
         type="submit"
       />
@@ -79,6 +79,17 @@ import Text from '@/components/Text/Text.vue';
 export default {
   name: 'InputGroupForm',
 
+  components: {
+    'oxd-form': Form,
+    'oxd-form-row': FormRow,
+    'oxd-input-group': InputGroup,
+    'oxd-form-actions': FormActions,
+    'oxd-input-field': InputField,
+    'oxd-divider': Divider,
+    'oxd-button': Button,
+    'oxd-text': Text,
+  },
+
   data() {
     return {
       firstname: '',
@@ -98,17 +109,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-form': Form,
-    'oxd-form-row': FormRow,
-    'oxd-input-group': InputGroup,
-    'oxd-form-actions': FormActions,
-    'oxd-input-field': InputField,
-    'oxd-divider': Divider,
-    'oxd-button': Button,
-    'oxd-text': Text,
-  },
-
   methods: {
     getFormValues() {
       console.log('form submit');
diff --git a/src/components/Form/stories/ResetForm.story.vue b/src/components/Form/stories/ResetForm.story.vue
index 0d840fe23..c2dced7f5 100644
--- a/src/components/Form/stories/ResetForm.story.vue
+++ b/src/components/Form/stories/ResetForm.story.vue
@@ -25,23 +25,23 @@
 
     <oxd-divider />
 
-    <oxd-form @submitValid="getFormValues" ref="form">
+    <oxd-form ref="form" @submit-valid="getFormValues">
       <oxd-form-row>
         <oxd-input-group class="orangehrm-bottom-space">
           <oxd-input-field
-            label="Job Category Name"
             v-model="name"
+            label="Job Category Name"
             :rules="rules.name"
           />
           <oxd-input-field
-            label="Job Category Id"
             v-model="id"
+            label="Job Category Id"
             :rules="rules.id"
           />
           <oxd-input-field
+            v-model="role"
             type="select"
             label="Job Role"
-            v-model="role"
             :rules="rules.role"
             :options="[
               {id: 1, label: 'All'},
@@ -55,10 +55,10 @@
       <oxd-divider />
 
       <oxd-form-actions>
-        <oxd-button displayType="ghost" label="Reset" type="reset" />
+        <oxd-button display-type="ghost" label="Reset" type="reset" />
         <oxd-button
           class="orangehrm-left-space"
-          displayType="secondary"
+          display-type="secondary"
           label="Add"
           type="submit"
         />
@@ -85,6 +85,17 @@ import Text from '@/components/Text/Text.vue';
 export default {
   name: 'ResetForm',
 
+  components: {
+    'oxd-form': Form,
+    'oxd-form-row': FormRow,
+    'oxd-input-group': InputGroup,
+    'oxd-form-actions': FormActions,
+    'oxd-input-field': InputField,
+    'oxd-divider': Divider,
+    'oxd-button': Button,
+    'oxd-text': Text,
+  },
+
   setup() {
     const form = ref(null);
 
@@ -112,17 +123,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-form': Form,
-    'oxd-form-row': FormRow,
-    'oxd-input-group': InputGroup,
-    'oxd-form-actions': FormActions,
-    'oxd-input-field': InputField,
-    'oxd-divider': Divider,
-    'oxd-button': Button,
-    'oxd-text': Text,
-  },
-
   methods: {
     getFormValues() {
       console.log('form submit');
diff --git a/src/components/Form/stories/ValidatableForm.story.vue b/src/components/Form/stories/ValidatableForm.story.vue
index 5b8393daf..1dcd1b7eb 100644
--- a/src/components/Form/stories/ValidatableForm.story.vue
+++ b/src/components/Form/stories/ValidatableForm.story.vue
@@ -25,23 +25,23 @@
 
   <oxd-divider />
 
-  <oxd-form @submitValid="getFormValues" ref="form">
+  <oxd-form ref="form" @submit-valid="getFormValues">
     <oxd-form-row>
       <oxd-input-group class="orangehrm-bottom-space">
         <oxd-input-field
-          label="Job Category Name"
           v-model="name"
+          label="Job Category Name"
           :rules="rules.name"
         />
         <oxd-input-field
-          label="Job Category Id"
           v-model="id"
+          label="Job Category Id"
           :rules="rules.id"
         />
         <oxd-input-field
+          v-model="role"
           type="select"
           label="Job Role"
-          v-model="role"
           :rules="rules.role"
           :options="[
             {id: 1, label: 'All'},
@@ -54,19 +54,19 @@
 
     <oxd-form-row>
       <oxd-input-field
+        v-model="consent"
         type="checkbox"
         label="Check this"
         option-label="I agree"
-        v-model="consent"
         :rules="rules.consent"
         true-value="yes"
         false-value="no"
       />
       <oxd-input-field
+        v-model="notify"
         type="switch"
         label="Switch this"
         option-label="Notify me"
-        v-model="notify"
         :rules="rules.notify"
       />
     </oxd-form-row>
@@ -74,10 +74,10 @@
     <oxd-divider />
 
     <oxd-form-actions>
-      <oxd-button displayType="ghost" label="Cancel" />
+      <oxd-button display-type="ghost" label="Cancel" />
       <oxd-button
         class="orangehrm-left-space"
-        displayType="secondary"
+        display-type="secondary"
         label="Add"
         type="submit"
       />
@@ -103,6 +103,17 @@ import Text from '@/components/Text/Text.vue';
 export default {
   name: 'ValidatableFrom',
 
+  components: {
+    'oxd-form': Form,
+    'oxd-form-row': FormRow,
+    'oxd-input-group': InputGroup,
+    'oxd-form-actions': FormActions,
+    'oxd-input-field': InputField,
+    'oxd-divider': Divider,
+    'oxd-button': Button,
+    'oxd-text': Text,
+  },
+
   setup() {
     const form = ref(null);
 
@@ -138,17 +149,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-form': Form,
-    'oxd-form-row': FormRow,
-    'oxd-input-group': InputGroup,
-    'oxd-form-actions': FormActions,
-    'oxd-input-field': InputField,
-    'oxd-divider': Divider,
-    'oxd-button': Button,
-    'oxd-text': Text,
-  },
-
   methods: {
     getFormValues() {
       console.log('form submit');
diff --git a/src/components/Grid/stories/Grid.story.vue b/src/components/Grid/stories/Grid.story.vue
index abf7131cc..434155b11 100644
--- a/src/components/Grid/stories/Grid.story.vue
+++ b/src/components/Grid/stories/Grid.story.vue
@@ -27,7 +27,7 @@
         <oxd-select-input
           v-model="cols"
           :options="options"
-          :showEmptySelector="false"
+          :show-empty-selector="false"
         />
       </div>
     </div>
@@ -83,11 +83,11 @@
 
       <oxd-divider />
       <oxd-form-actions>
-        <oxd-button label="Cancel" displayType="ghost" />
+        <oxd-button label="Cancel" display-type="ghost" />
         <oxd-button
           label="Save"
           type="submit"
-          displayType="secondary"
+          display-type="secondary"
           class="orangehrm-left-space"
         />
       </oxd-form-actions>
diff --git a/src/components/Input/stories/AutocompleteCustom.story.vue b/src/components/Input/stories/AutocompleteCustom.story.vue
index 383cfc435..43565019e 100644
--- a/src/components/Input/stories/AutocompleteCustom.story.vue
+++ b/src/components/Input/stories/AutocompleteCustom.story.vue
@@ -22,8 +22,8 @@
 
 <template>
   <div>
-    <oxd-autocomplete-input v-model="selected" :createOptions="callAPI">
-      <template v-slot:beforeSelected="{data}">
+    <oxd-autocomplete-input v-model="selected" :create-options="callAPI">
+      <template #beforeSelected="{data}">
         <img
           width="25"
           height="25"
@@ -31,11 +31,10 @@
           :src="data.avatar_url"
         />
       </template>
-      <template v-slot:afterSelected="{data}">
-        (Github ID : {{ data.id }})
-      </template>
-      <template v-slot:option="{data, text}">
+      <template #afterSelected="{data}"> (Github ID : {{ data.id }}) </template>
+      <template #option="{data, text}">
         <oxd-checkbox-input />
+        <!-- eslint-disable-next-line vue/no-v-html -->
         <span v-html="text"></span>
         <div class="github-id">{{ data.id }}</div>
       </template>
@@ -50,17 +49,16 @@ import CheckboxInput from '@/components/Input/CheckboxInput.vue';
 import AutocompleteInput from '@/components/Input/Autocomplete/AutocompleteInput.vue';
 
 export default {
+  components: {
+    'oxd-autocomplete-input': AutocompleteInput,
+    'oxd-checkbox-input': CheckboxInput,
+  },
   data() {
     return {
       selected: null,
     };
   },
 
-  components: {
-    'oxd-autocomplete-input': AutocompleteInput,
-    'oxd-checkbox-input': CheckboxInput,
-  },
-
   methods: {
     callAPI(serachParam) {
       return new Promise((resolve) => {
diff --git a/src/components/Input/stories/SwitchInput.stories.js b/src/components/Input/stories/SwitchInput.stories.js
index 64232a24c..b1d435b67 100644
--- a/src/components/Input/stories/SwitchInput.stories.js
+++ b/src/components/Input/stories/SwitchInput.stories.js
@@ -41,7 +41,7 @@ const Template = (args) => ({
   template: '<oxd-switch-input v-bind="args" />',
 });
 
-const VmodelSample = (args) => ({
+const VmodelSample = () => ({
   data() {
     return {
       selected: ['3'],
diff --git a/src/components/InputField/stories/InputField.stories.js b/src/components/InputField/stories/InputField.stories.js
index 6058761bc..6a7fb8c0b 100644
--- a/src/components/InputField/stories/InputField.stories.js
+++ b/src/components/InputField/stories/InputField.stories.js
@@ -17,7 +17,6 @@
  * along with this program.  If not, see  http://www.gnu.org/licenses
  */
 
-import {h, ref} from 'vue';
 import Form from '@/components/Form/Form.vue';
 import {TYPES} from '@/components/InputField/types';
 import InputField from '@/components/InputField/InputField.vue';
diff --git a/src/components/InputField/stories/InputFieldValidation.story.vue b/src/components/InputField/stories/InputFieldValidation.story.vue
index 40ef12cd3..4fd630425 100644
--- a/src/components/InputField/stories/InputFieldValidation.story.vue
+++ b/src/components/InputField/stories/InputFieldValidation.story.vue
@@ -23,24 +23,24 @@
   <oxd-form>
     <oxd-form-row>
       <oxd-input-field
+        v-model="input"
         required
         label="Label"
         :rules="rules.input"
-        v-model="input"
       />
       <oxd-input-field
-        label="Label without validation"
         v-model="input"
+        label="Label without validation"
         placeholder="Placeholder"
       />
     </oxd-form-row>
 
     <oxd-form-row>
       <oxd-input-field
+        v-model="file"
         type="file"
         label="File Label"
         :rules="rules.file"
-        v-model="file"
       />
     </oxd-form-row>
 
@@ -48,18 +48,18 @@
       <oxd-input-field
         type="file"
         label="File Label with button"
-        buttonLabel="Browse"
+        button-label="Browse"
         :rules="rules.file"
       />
     </oxd-form-row>
 
     <oxd-form-row>
       <oxd-input-field
+        v-model="textarea"
         type="textarea"
         label="Textarea Label"
         :placeholder="placeholder"
         :rules="rules.textarea"
-        v-model="textarea"
       />
     </oxd-form-row>
   </oxd-form>
@@ -67,12 +67,15 @@
 
 <script>
 import Form from '@/components/Form/Form.vue';
-import Input from '@/components/Input/Input.vue';
-import Label from '@/components/Label/Label.vue';
 import FormRow from '@/components/Form/FormRow.vue';
 import InputField from '@/components/InputField/InputField.vue';
 
 export default {
+  components: {
+    'oxd-form': Form,
+    'oxd-form-row': FormRow,
+    'oxd-input-field': InputField,
+  },
   data() {
     return {
       input: '',
@@ -103,13 +106,5 @@ export default {
       placeholder: 'Placeholder',
     };
   },
-
-  components: {
-    'oxd-form': Form,
-    'oxd-form-row': FormRow,
-    'oxd-input': Input,
-    'oxd-label': Label,
-    'oxd-input-field': InputField,
-  },
 };
 </script>
diff --git a/src/components/Layout/stories/LayoutComplex.story.vue b/src/components/Layout/stories/LayoutComplex.story.vue
index 148e36deb..434f10a75 100644
--- a/src/components/Layout/stories/LayoutComplex.story.vue
+++ b/src/components/Layout/stories/LayoutComplex.story.vue
@@ -35,13 +35,13 @@
           <oxd-form-row>
             <oxd-grid :cols="4" class="orangehrm-filter-grid">
               <oxd-grid-item>
-                <oxd-input-field label="Username" v-model="filters.username" />
+                <oxd-input-field v-model="filters.username" label="Username" />
               </oxd-grid-item>
               <oxd-grid-item>
                 <oxd-input-field
+                  v-model="filters.role"
                   type="select"
                   label="User Role"
-                  v-model="filters.role"
                   :options="[]"
                 />
               </oxd-grid-item>
@@ -49,7 +49,7 @@
           </oxd-form-row>
           <oxd-divider />
           <oxd-form-actions>
-            <oxd-button displayType="secondary" label="Search" type="submit" />
+            <oxd-button display-type="secondary" label="Search" type="submit" />
           </oxd-form-actions>
         </oxd-form>
       </oxd-table-filter>
@@ -60,19 +60,19 @@
         :items="items"
         :column-count="6"
       >
-        <template v-slot:pagination>
+        <template #pagination>
           <oxd-pagination :length="3" :max="10" />
         </template>
       </oxd-report-table>
     </div>
-    <template v-slot:user-actions>
+    <template #user-actions>
       <li role="none">
         <a href="#" role="menuitem" class="oxd-userdropdown-link">
           <oxd-icon name="box-arrow-right" :with-container="false" />Logout
         </a>
       </li>
     </template>
-    <template v-slot:footer>
+    <template #footer>
       <oxd-text tag="p" class="orangehrm-copyright">OrangeHRM 5.0</oxd-text>
       <oxd-text tag="p" class="orangehrm-copyright">
         &copy; 2005 - 2021
diff --git a/src/components/Layout/stories/LayoutSimple.story.vue b/src/components/Layout/stories/LayoutSimple.story.vue
index 21b2adb99..a10ef9285 100644
--- a/src/components/Layout/stories/LayoutSimple.story.vue
+++ b/src/components/Layout/stories/LayoutSimple.story.vue
@@ -30,12 +30,12 @@
     :breadcrumb="breadcrumb"
   >
     <p class="context-default">slot for context</p>
-    <template v-slot:user-actions>
+    <template #user-actions>
       <li role="none">
         <a href="#" role="menuitem" class="oxd-userdropdown-link"> Logout </a>
       </li>
     </template>
-    <template v-slot:footer>
+    <template #footer>
       <p class="context-footer">slot for footer</p>
       <br />
     </template>
diff --git a/src/components/ReportTable/stories/PIMReport.story.vue b/src/components/ReportTable/stories/PIMReport.story.vue
index 05d7f1630..7daf841b3 100644
--- a/src/components/ReportTable/stories/PIMReport.story.vue
+++ b/src/components/ReportTable/stories/PIMReport.story.vue
@@ -27,7 +27,7 @@
       :headers="headers"
       :items="items"
     >
-      <template v-slot:pagination>
+      <template #pagination>
         <oxd-pagination :length="3" :max="10" />
       </template>
     </oxd-report-table>
@@ -42,6 +42,10 @@ import ReportTable from '@/components/ReportTable/ReportTable.vue';
 import MultilineCell from '@/components/ReportTable/Cell/MultilineCell.vue';
 
 export default {
+  components: {
+    'oxd-report-table': ReportTable,
+    'oxd-pagination': Pagination,
+  },
   data() {
     return {
       height: 500,
@@ -51,11 +55,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-report-table': ReportTable,
-    'oxd-pagination': Pagination,
-  },
-
   beforeMount() {
     const setupColumn = (column) => {
       delete column['size'];
diff --git a/src/components/ReportTable/stories/ReportCustom.story.vue b/src/components/ReportTable/stories/ReportCustom.story.vue
index 359a7f7dd..9c1cc1a30 100644
--- a/src/components/ReportTable/stories/ReportCustom.story.vue
+++ b/src/components/ReportTable/stories/ReportCustom.story.vue
@@ -27,7 +27,7 @@
       :headers="headers"
       :items="items"
     >
-      <template v-slot:pagination>
+      <template #pagination>
         <oxd-pagination :length="3" :max="10" />
       </template>
     </oxd-report-table>
@@ -41,6 +41,10 @@ import ReportTable from '@/components/ReportTable/ReportTable.vue';
 import MultilineCell from '@/components/ReportTable/Cell/MultilineCell.vue';
 
 export default {
+  components: {
+    'oxd-pagination': Pagination,
+    'oxd-report-table': ReportTable,
+  },
   data() {
     return {
       height: 500,
@@ -75,21 +79,8 @@ export default {
     };
   },
 
-  components: {
-    'oxd-report-table': ReportTable,
-    'oxd-pagination': Pagination,
-  },
-
   beforeMount() {
-    const types = [
-      'AUS - Annual',
-      'AUS - Casual',
-      'AUS - Maternity',
-      'LKA - Annual',
-      'LKA - Casual',
-      'LKA - Maternity',
-    ];
-    this.items = new Array(5).fill('').map((_, index) => {
+    this.items = new Array(5).fill('').map(() => {
       const rand = new String(Math.random() * 100000).substring(0, 4);
       return {
         employeeId: rand,
diff --git a/src/components/ReportTable/stories/ReportTable.story.vue b/src/components/ReportTable/stories/ReportTable.story.vue
index 9adb78550..ccc57a948 100644
--- a/src/components/ReportTable/stories/ReportTable.story.vue
+++ b/src/components/ReportTable/stories/ReportTable.story.vue
@@ -28,7 +28,7 @@
       :items="items"
       :column-count="6"
     >
-      <template v-slot:pagination>
+      <template #pagination>
         <oxd-pagination :length="3" :max="10" />
       </template>
     </oxd-report-table>
@@ -40,6 +40,10 @@ import Pagination from '@/components/Pagination/Pagination.vue';
 import ReportTable from '@/components/ReportTable/ReportTable.vue';
 
 export default {
+  components: {
+    'oxd-report-table': ReportTable,
+    'oxd-pagination': Pagination,
+  },
   data() {
     return {
       height: 500,
@@ -95,11 +99,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-report-table': ReportTable,
-    'oxd-pagination': Pagination,
-  },
-
   beforeMount() {
     const types = [
       'AUS - Annual',
@@ -109,7 +108,7 @@ export default {
       'LKA - Casual',
       'LKA - Maternity',
     ];
-    this.items = new Array(50).fill('').map((_, index) => {
+    this.items = new Array(50).fill('').map(() => {
       const rand = Math.random();
       return {
         type: types[Math.floor(rand * types.length)],
diff --git a/src/components/Tab/stories/CustomControllerTab.story.vue b/src/components/Tab/stories/CustomControllerTab.story.vue
index 40509682e..744389fb1 100644
--- a/src/components/Tab/stories/CustomControllerTab.story.vue
+++ b/src/components/Tab/stories/CustomControllerTab.story.vue
@@ -23,7 +23,7 @@
   <oxd-tab-container
     v-model="selector"
     :show-tabs="false"
-    @clickTab="onClickTab"
+    @click-tab="onClickTab"
   >
     <oxd-tab-panel
       key="first"
@@ -82,13 +82,13 @@
   </oxd-tab-container>
   <br />
   <div class="orangehrm-custom-tabs">
-    <input type="radio" name="contact" value="First Tab" v-model="selector" />
+    <input v-model="selector" type="radio" name="contact" value="First Tab" />
     <label>First Tab</label>
 
-    <input type="radio" name="contact" value="Second Tab" v-model="selector" />
+    <input v-model="selector" type="radio" name="contact" value="Second Tab" />
     <label>Second Tab</label>
 
-    <input type="radio" name="contact" value="Third Tab" v-model="selector" />
+    <input v-model="selector" type="radio" name="contact" value="Third Tab" />
     <label>Third Tab</label>
   </div>
 </template>
diff --git a/src/components/Tab/stories/DefaultTab.story.vue b/src/components/Tab/stories/DefaultTab.story.vue
index 8e854518b..6d6063b54 100644
--- a/src/components/Tab/stories/DefaultTab.story.vue
+++ b/src/components/Tab/stories/DefaultTab.story.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-  <oxd-tab-container v-model="selector" @clickTab="onClickTab">
+  <oxd-tab-container v-model="selector" @click-tab="onClickTab">
     <oxd-tab-panel
       key="first"
       name="First Tab"
diff --git a/src/components/Tab/stories/KeepAliveTab.story.vue b/src/components/Tab/stories/KeepAliveTab.story.vue
index 92de0dd1e..d3f05c347 100644
--- a/src/components/Tab/stories/KeepAliveTab.story.vue
+++ b/src/components/Tab/stories/KeepAliveTab.story.vue
@@ -20,31 +20,31 @@
 -->
 
 <template>
-  <oxd-tab-container v-model="selector" @clickTab="onClickTab">
+  <oxd-tab-container v-model="selector" @click-tab="onClickTab">
     <oxd-tab-panel key="login" name="Login">
       <oxd-form class="orangehrm-form">
         <oxd-text tag="h5">Login</oxd-text>
         <oxd-divider />
         <oxd-form-row>
           <oxd-input-field
-            label="Username"
             v-model="username"
+            label="Username"
             placeholder="Type your username"
           />
         </oxd-form-row>
         <oxd-form-row>
           <oxd-input-field
+            v-model="password"
             label="Password"
             type="password"
-            v-model="password"
             placeholder="Type your password"
           />
         </oxd-form-row>
 
         <div class="orangehrm-form-footer">
-          <oxd-button displayType="secondary" label="Login" />
+          <oxd-button display-type="secondary" label="Login" />
           <oxd-button
-            displayType="ghost"
+            display-type="ghost"
             label="Register"
             @click="onClickRegister"
           />
@@ -57,38 +57,42 @@
         <oxd-divider />
         <oxd-form-row>
           <oxd-input-field
-            label="E-mail"
             v-model="email"
+            label="E-mail"
             placeholder="Type your E-mail"
           />
         </oxd-form-row>
         <oxd-form-row>
           <oxd-input-field
-            label="Username"
             v-model="username"
+            label="Username"
             placeholder="Type your username"
           />
         </oxd-form-row>
         <oxd-form-row>
           <oxd-input-field
+            v-model="password"
             label="Password"
             type="password"
-            v-model="password"
             placeholder="Type your password"
           />
         </oxd-form-row>
         <oxd-form-row>
           <oxd-input-field
+            v-model="confirm"
             label="Confirm Password"
             type="password"
-            v-model="confirm"
             placeholder="Type your password again"
           />
         </oxd-form-row>
 
         <div class="orangehrm-form-footer">
-          <oxd-button displayType="secondary" label="Register" />
-          <oxd-button displayType="ghost" label="Login" @click="onClickLogin" />
+          <oxd-button display-type="secondary" label="Register" />
+          <oxd-button
+            display-type="ghost"
+            label="Login"
+            @click="onClickLogin"
+          />
         </div>
       </oxd-form>
     </oxd-tab-panel>
diff --git a/src/components/Tab/stories/NoAnimationTab.story.vue b/src/components/Tab/stories/NoAnimationTab.story.vue
index 5484e0a6a..74bcbe9b1 100644
--- a/src/components/Tab/stories/NoAnimationTab.story.vue
+++ b/src/components/Tab/stories/NoAnimationTab.story.vue
@@ -23,7 +23,7 @@
   <oxd-tab-container
     v-model="selector"
     :animation="false"
-    @clickTab="onClickTab"
+    @click-tab="onClickTab"
   >
     <oxd-tab-panel key="first" name="First Tab">
       <p>
diff --git a/src/components/Table/stories/BasicTable.story.vue b/src/components/Table/stories/BasicTable.story.vue
index 3367671e1..a129db614 100644
--- a/src/components/Table/stories/BasicTable.story.vue
+++ b/src/components/Table/stories/BasicTable.story.vue
@@ -33,7 +33,7 @@
     </oxd-thead>
 
     <oxd-tbody>
-      <oxd-tr v-for="item in items" @click="onClick(item)($event)">
+      <oxd-tr v-for="item in items" :key="item" @click="onClick(item)($event)">
         <oxd-td>{{ item.col1 }}</oxd-td>
         <oxd-td>{{ item.col2 }}</oxd-td>
         <oxd-td>
@@ -57,16 +57,6 @@ import TableDataCell from '@/components/Table/TableDataCell.vue';
 import TableHeaderCell from '@/components/Table/TableHeaderCell.vue';
 
 export default {
-  data() {
-    return {
-      items: [
-        {col1: 'Data 1', col2: 'Data 2'},
-        {col1: 'Data 2', col2: 'Data 2'},
-        {col1: 'Data 3', col2: 'Data 2'},
-      ],
-    };
-  },
-
   components: {
     'oxd-table': Table,
     'oxd-thead': TableHeader,
@@ -77,6 +67,15 @@ export default {
     'oxd-td': TableDataCell,
     'oxd-icon-button': IconButton,
   },
+  data() {
+    return {
+      items: [
+        {col1: 'Data 1', col2: 'Data 2'},
+        {col1: 'Data 2', col2: 'Data 2'},
+        {col1: 'Data 3', col2: 'Data 2'},
+      ],
+    };
+  },
 
   methods: {
     onClick(item) {
@@ -85,7 +84,9 @@ export default {
         console.log(e);
       };
     },
-    onBtnClick(e) {},
+    onBtnClick() {
+      // do nothing
+    },
   },
 };
 </script>
diff --git a/src/components/Table/stories/ClassicTable.story.vue b/src/components/Table/stories/ClassicTable.story.vue
index 57f7606fd..ec229363b 100644
--- a/src/components/Table/stories/ClassicTable.story.vue
+++ b/src/components/Table/stories/ClassicTable.story.vue
@@ -21,12 +21,12 @@
 
 <template>
   <oxd-clasic-table
+    v-model:selected="checkedItems"
     :selector="selector"
     :headers="headers"
     :items="items"
-    @click="onClick"
     selectable
-    v-model:selected="checkedItems"
+    @click="onClick"
   />
 </template>
 
@@ -34,6 +34,9 @@
 import ClassicTable from '@/components/Table/ClassicTable.vue';
 
 export default {
+  components: {
+    'oxd-clasic-table': ClassicTable,
+  },
   data() {
     return {
       selector: {
@@ -55,10 +58,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-clasic-table': ClassicTable,
-  },
-
   methods: {
     onClick(e) {
       console.log(e);
diff --git a/src/components/TableFilter/stories/TableFilter.story.vue b/src/components/TableFilter/stories/TableFilter.story.vue
index b8028afbf..7907ac87d 100644
--- a/src/components/TableFilter/stories/TableFilter.story.vue
+++ b/src/components/TableFilter/stories/TableFilter.story.vue
@@ -23,12 +23,12 @@
 <template>
   <div class="container">
     <oxd-table-filter filter-title="System Users">
-      <template v-slot:toggleOptions>
+      <template #toggleOptions>
         <oxd-icon-button name="funnel" />
         <oxd-icon-button name="pie-chart-fill" />
         <oxd-icon-button name="pencil-fill" />
       </template>
-      <template v-slot:exportOptions>
+      <template #exportOptions>
         <oxd-button
           size="small"
           display-type="tool"
@@ -42,17 +42,17 @@
           icon-name="file-earmark-spreadsheet"
         />
       </template>
-      <oxd-form @submitValid="filterItems">
+      <oxd-form @submit-valid="filterItems">
         <oxd-form-row>
           <oxd-grid :cols="4">
             <oxd-grid-item>
-              <oxd-input-field label="Username" v-model="filters.username" />
+              <oxd-input-field v-model="filters.username" label="Username" />
             </oxd-grid-item>
             <oxd-grid-item>
               <oxd-input-field
+                v-model="filters.role"
                 type="select"
                 label="User Role"
-                v-model="filters.role"
                 :clear="false"
                 :options="[
                   {id: 1, label: 'All'},
@@ -63,17 +63,17 @@
             </oxd-grid-item>
             <oxd-grid-item>
               <oxd-input-field
+                v-model="filters.empName"
                 type="autocomplete"
                 label="Employee Name"
-                v-model="filters.empName"
-                :createOptions="loadEmployees"
+                :create-options="loadEmployees"
               />
             </oxd-grid-item>
             <oxd-grid-item>
               <oxd-input-field
+                v-model="filters.status"
                 type="select"
                 label="Status"
-                v-model="filters.status"
                 :options="[
                   {id: 1, label: 'All'},
                   {id: 2, label: 'Enabled'},
@@ -87,10 +87,10 @@
         <oxd-divider />
 
         <oxd-form-actions>
-          <oxd-button displayType="secondary" label="Search" type="submit" />
+          <oxd-button display-type="secondary" label="Search" type="submit" />
           <oxd-button
             class="orangehrm-left-space"
-            displayType="ghost"
+            display-type="ghost"
             label="Reset"
           />
         </oxd-form-actions>
@@ -98,11 +98,11 @@
     </oxd-table-filter>
     <div class="orangehrm-table-container">
       <oxd-card-table
+        v-model:selected="checkedItems"
         :headers="headers"
         :items="items"
         :selectable="true"
-        v-model:selected="checkedItems"
-        rowDecorator="oxd-table-decorator-card"
+        row-decorator="oxd-table-decorator-card"
       />
     </div>
   </div>
@@ -119,10 +119,22 @@ import Divider from '@/components/Divider/Divider.vue';
 import FormActions from '@/components/Form/FormActions.vue';
 import CardTable from '@/components/CardTable/CardTable.vue';
 import InputField from '@/components/InputField/InputField.vue';
-import InputGroup from '@/components/InputField/InputGroup.vue';
 import TableFilter from '@/components/TableFilter/TableFilter.vue';
 
 export default {
+  components: {
+    'oxd-grid': Grid,
+    'oxd-form': Form,
+    'oxd-button': Button,
+    'oxd-divider': Divider,
+    'oxd-form-row': FormRow,
+    'oxd-grid-item': GridItem,
+    'oxd-card-table': CardTable,
+    'oxd-icon-button': IconButton,
+    'oxd-input-field': InputField,
+    'oxd-form-actions': FormActions,
+    'oxd-table-filter': TableFilter,
+  },
   data() {
     return {
       filters: {
@@ -145,21 +157,6 @@ export default {
     };
   },
 
-  components: {
-    'oxd-table-filter': TableFilter,
-    'oxd-grid': Grid,
-    'oxd-grid-item': GridItem,
-    'oxd-form': Form,
-    'oxd-form-row': FormRow,
-    'oxd-form-actions': FormActions,
-    'oxd-input-group': InputGroup,
-    'oxd-input-field': InputField,
-    'oxd-button': Button,
-    'oxd-icon-button': IconButton,
-    'oxd-divider': Divider,
-    'oxd-card-table': CardTable,
-  },
-
   methods: {
     filterItems() {
       console.log(this.filters);
@@ -184,7 +181,9 @@ export default {
         }, 5000);
       });
     },
-    onBtnClick(e) {},
+    onBtnClick() {
+      // do nothing
+    },
   },
 };
 </script>
diff --git a/src/components/Toast/stories/ToastContainerCustomWrapper.story.vue b/src/components/Toast/stories/ToastContainerCustomWrapper.story.vue
index c05c35078..cdf159159 100644
--- a/src/components/Toast/stories/ToastContainerCustomWrapper.story.vue
+++ b/src/components/Toast/stories/ToastContainerCustomWrapper.story.vue
@@ -23,7 +23,7 @@
 <template>
   <oxd-toast-container
     v-model:toasts="toasts"
-    toastClass="oxd-toast-container--toast-custom"
+    toast-class="oxd-toast-container--toast-custom"
   />
 </template>
 
diff --git a/src/components/TreeView/stories/CustomTemplate.vue b/src/components/TreeView/stories/CustomTemplate.vue
index eab501058..463b06c4b 100644
--- a/src/components/TreeView/stories/CustomTemplate.vue
+++ b/src/components/TreeView/stories/CustomTemplate.vue
@@ -26,7 +26,7 @@
     :show-root="false"
     class="org-structure"
   >
-    <template v-slot:content="{nodeData}">
+    <template #content="{nodeData}">
       <oxd-sheet type="pastel-white" class="org-structure-card">
         <div class="org-name">
           {{ nodeData.name }}
@@ -34,15 +34,15 @@
         <div class="org-action">
           <oxd-icon-button
             class="org-action-icon"
-            @click="onDelete"
             name="trash-fill"
             role="none"
+            @click="onDelete"
           />
           <oxd-icon-button
             class="org-action-icon"
-            @click="onDelete"
             name="plus"
             role="none"
+            @click="onDelete"
           />
         </div>
       </oxd-sheet>
diff --git a/yarn.lock b/yarn.lock
index 53bf73cac..056dec9cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1380,6 +1380,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bcoe/v8-coverage@npm:^0.2.3":
+  version: 0.2.3
+  resolution: "@bcoe/v8-coverage@npm:0.2.3"
+  checksum: 850f9305536d0f2bd13e9e0881cb5f02e4f93fad1189f7b2d4bebf694e3206924eadee1068130d43c11b750efcc9405f88a8e42ef098b6d75239c0f047de1a27
+  languageName: node
+  linkType: hard
+
 "@colors/colors@npm:1.5.0":
   version: 1.5.0
   resolution: "@colors/colors@npm:1.5.0"
@@ -1626,7 +1633,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@istanbuljs/schema@npm:^0.1.2":
+"@istanbuljs/schema@npm:^0.1.2, @istanbuljs/schema@npm:^0.1.3":
   version: 0.1.3
   resolution: "@istanbuljs/schema@npm:0.1.3"
   checksum: 5282759d961d61350f33d9118d16bcaed914ebf8061a52f4fa474b2cb08720c9c81d165e13b82f2e5a8a212cc5af482f0c6fc1ac27b9e067e5394c9a6ed186c9
@@ -1734,7 +1741,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.15, @jridgewell/trace-mapping@npm:^0.3.9":
+"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.15, @jridgewell/trace-mapping@npm:^0.3.9":
   version: 0.3.17
   resolution: "@jridgewell/trace-mapping@npm:0.3.17"
   dependencies:
@@ -3168,7 +3175,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0":
+"@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.4
   resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
   checksum: a25d7589ee65c94d31464c16b72a9dc81dfa0bea9d3e105ae03882d616e2a0712a9c101a599ec482d297c3591e16336962878cb3eb1a0a62d5b76d277a890ce7
@@ -3523,6 +3530,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/coverage-c8@npm:^0.27.1":
+  version: 0.27.1
+  resolution: "@vitest/coverage-c8@npm:0.27.1"
+  dependencies:
+    c8: ^7.12.0
+    vitest: 0.27.1
+  checksum: 3d009c5c948b765113cd5003f52facbdd0629b91daaa14580a91efdb9d4d868718483b60fd291560a9327816ceaffcdf55b31b1696d9107ad48deba52ad38c00
+  languageName: node
+  linkType: hard
+
 "@volar/language-core@npm:1.0.24":
   version: 1.0.24
   resolution: "@volar/language-core@npm:1.0.24"
@@ -4400,6 +4417,35 @@ __metadata:
   languageName: node
   linkType: hard
 
+"c8@npm:^7.12.0":
+  version: 7.12.0
+  resolution: "c8@npm:7.12.0"
+  dependencies:
+    "@bcoe/v8-coverage": ^0.2.3
+    "@istanbuljs/schema": ^0.1.3
+    find-up: ^5.0.0
+    foreground-child: ^2.0.0
+    istanbul-lib-coverage: ^3.2.0
+    istanbul-lib-report: ^3.0.0
+    istanbul-reports: ^3.1.4
+    rimraf: ^3.0.2
+    test-exclude: ^6.0.0
+    v8-to-istanbul: ^9.0.0
+    yargs: ^16.2.0
+    yargs-parser: ^20.2.9
+  bin:
+    c8: bin/c8.js
+  checksum: 3b7fa9ad7cff2cb0bb579467e6b544498fbd46e9353a809ad3b8cf749df4beadd074cde277356b0552f3c8055b1b3ec3ebaf2209e9ad4bdefed92dbf64d283ab
+  languageName: node
+  linkType: hard
+
+"cac@npm:^6.7.14":
+  version: 6.7.14
+  resolution: "cac@npm:6.7.14"
+  checksum: 45a2496a9443abbe7f52a49b22fbe51b1905eff46e03fd5e6c98e3f85077be3f8949685a1849b1a9cd2bc3e5567dfebcf64f01ce01847baf918f1b37c839791a
+  languageName: node
+  linkType: hard
+
 "cacache@npm:^16.1.0":
   version: 16.1.3
   resolution: "cacache@npm:16.1.3"
@@ -4614,6 +4660,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cliui@npm:^7.0.2":
+  version: 7.0.4
+  resolution: "cliui@npm:7.0.4"
+  dependencies:
+    string-width: ^4.2.0
+    strip-ansi: ^6.0.0
+    wrap-ansi: ^7.0.0
+  checksum: ce2e8f578a4813806788ac399b9e866297740eecd4ad1823c27fd344d78b22c5f8597d548adbcc46f0573e43e21e751f39446c5a5e804a12aace402b7a315d7f
+  languageName: node
+  linkType: hard
+
 "clone-deep@npm:^4.0.1":
   version: 4.0.1
   resolution: "clone-deep@npm:4.0.1"
@@ -4789,7 +4846,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"convert-source-map@npm:^1.7.0":
+"convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0":
   version: 1.9.0
   resolution: "convert-source-map@npm:1.9.0"
   checksum: dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8
@@ -4860,7 +4917,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3":
+"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3":
   version: 7.0.3
   resolution: "cross-spawn@npm:7.0.3"
   dependencies:
@@ -6132,6 +6189,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"foreground-child@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "foreground-child@npm:2.0.0"
+  dependencies:
+    cross-spawn: ^7.0.0
+    signal-exit: ^3.0.2
+  checksum: f77ec9aff621abd6b754cb59e690743e7639328301fbea6ff09df27d2befaf7dd5b77cec51c32323d73a81a7d91caaf9413990d305cbe3d873eec4fe58960956
+  languageName: node
+  linkType: hard
+
 "form-data@npm:^3.0.0":
   version: 3.0.1
   resolution: "form-data@npm:3.0.1"
@@ -6301,6 +6368,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-caller-file@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "get-caller-file@npm:2.0.5"
+  checksum: b9769a836d2a98c3ee734a88ba712e62703f1df31b94b784762c433c27a386dd6029ff55c2a920c392e33657d80191edbf18c61487e198844844516f843496b9
+  languageName: node
+  linkType: hard
+
 "get-func-name@npm:^2.0.0":
   version: 2.0.0
   resolution: "get-func-name@npm:2.0.0"
@@ -6674,6 +6748,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-escaper@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "html-escaper@npm:2.0.2"
+  checksum: d2df2da3ad40ca9ee3a39c5cc6475ef67c8f83c234475f24d8e9ce0dc80a2c82df8e1d6fa78ddd1e9022a586ea1bd247a615e80a5cd9273d90111ddda7d9e974
+  languageName: node
+  linkType: hard
+
 "http-cache-semantics@npm:^4.1.0":
   version: 4.1.0
   resolution: "http-cache-semantics@npm:4.1.0"
@@ -7332,7 +7413,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"istanbul-lib-coverage@npm:^3.2.0":
+"istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.0":
   version: 3.2.0
   resolution: "istanbul-lib-coverage@npm:3.2.0"
   checksum: a2a545033b9d56da04a8571ed05c8120bf10e9bce01cf8633a3a2b0d1d83dff4ac4fe78d6d5673c27fc29b7f21a41d75f83a36be09f82a61c367b56aa73c1ff9
@@ -7352,6 +7433,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"istanbul-lib-report@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "istanbul-lib-report@npm:3.0.0"
+  dependencies:
+    istanbul-lib-coverage: ^3.0.0
+    make-dir: ^3.0.0
+    supports-color: ^7.1.0
+  checksum: 3f29eb3f53c59b987386e07fe772d24c7f58c6897f34c9d7a296f4000de7ae3de9eb95c3de3df91dc65b134c84dee35c54eee572a56243e8907c48064e34ff1b
+  languageName: node
+  linkType: hard
+
+"istanbul-reports@npm:^3.1.4":
+  version: 3.1.5
+  resolution: "istanbul-reports@npm:3.1.5"
+  dependencies:
+    html-escaper: ^2.0.0
+    istanbul-lib-report: ^3.0.0
+  checksum: 7867228f83ed39477b188ea07e7ccb9b4f5320b6f73d1db93a0981b7414fa4ef72d3f80c4692c442f90fc250d9406e71d8d7ab65bb615cb334e6292b73192b89
+  languageName: node
+  linkType: hard
+
 "jake@npm:^10.8.5":
   version: 10.8.5
   resolution: "jake@npm:10.8.5"
@@ -7601,6 +7703,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsonc-parser@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "jsonc-parser@npm:3.2.0"
+  checksum: 946dd9a5f326b745aa326d48a7257e3f4a4b62c5e98ec8e49fa2bdd8d96cef7e6febf1399f5c7016114fd1f68a1c62c6138826d5d90bc650448e3cf0951c53c7
+  languageName: node
+  linkType: hard
+
 "jsonfile@npm:^6.0.1":
   version: 6.1.0
   resolution: "jsonfile@npm:6.1.0"
@@ -7870,7 +7979,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"make-dir@npm:^3.0.2":
+"make-dir@npm:^3.0.0, make-dir@npm:^3.0.2":
   version: 3.1.0
   resolution: "make-dir@npm:3.1.0"
   dependencies:
@@ -8233,6 +8342,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mlly@npm:^1.0.0, mlly@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "mlly@npm:1.1.0"
+  dependencies:
+    acorn: ^8.8.1
+    pathe: ^1.0.0
+    pkg-types: ^1.0.1
+    ufo: ^1.0.1
+  checksum: d53147a2f5f83499589c47a00e00df30cbae2e630dfcfdfdeee2b70b49aff6612f2fa13195a1c6268b8f8ecd6064cb9a35febbdf895b2cbfeacdf9a9b3e31493
+  languageName: node
+  linkType: hard
+
 "mri@npm:^1.2.0":
   version: 1.2.0
   resolution: "mri@npm:1.2.0"
@@ -8682,6 +8803,7 @@ __metadata:
     "@types/jsdom": ^20.0.1
     "@types/node": ^18.11.12
     "@vitejs/plugin-vue": ^4.0.0
+    "@vitest/coverage-c8": ^0.27.1
     "@vue/eslint-config-prettier": ^7.0.0
     "@vue/eslint-config-typescript": ^11.0.0
     "@vue/test-utils": ^2.2.6
@@ -8888,6 +9010,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pathe@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "pathe@npm:0.2.0"
+  checksum: 9a8149ce152088f30d15b0b03a7c128ba21f16b4dc1f3f90fe38eee9f6d0f1d6da8e4e47bd2a4f9e14aaac7c30ed01cfc86216479011de2bdc598b65e6f19f41
+  languageName: node
+  linkType: hard
+
 "pathe@npm:^1.0.0":
   version: 1.0.0
   resolution: "pathe@npm:1.0.0"
@@ -8980,6 +9109,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pkg-types@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "pkg-types@npm:1.0.1"
+  dependencies:
+    jsonc-parser: ^3.2.0
+    mlly: ^1.0.0
+    pathe: ^1.0.0
+  checksum: fe73cc22fb72ddb09227e2837a7b2ed1e0706a18e69a58a6ce13cde2b7eab122cb98de44d5c54fca5715d203ef3d2eb004b3ec84a3c05decb11e7c49a80fe2f9
+  languageName: node
+  linkType: hard
+
 "polished@npm:^4.2.2":
   version: 4.2.2
   resolution: "polished@npm:4.2.2"
@@ -9672,6 +9812,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"require-directory@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "require-directory@npm:2.1.1"
+  checksum: fb47e70bf0001fdeabdc0429d431863e9475e7e43ea5f94ad86503d918423c1543361cc5166d713eaa7029dd7a3d34775af04764bebff99ef413111a5af18c80
+  languageName: node
+  linkType: hard
+
 "requires-port@npm:^1.0.0":
   version: 1.0.0
   resolution: "requires-port@npm:1.0.0"
@@ -10078,6 +10225,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"siginfo@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "siginfo@npm:2.0.0"
+  checksum: 8aa5a98640ca09fe00d74416eca97551b3e42991614a3d1b824b115fc1401543650914f651ab1311518177e4d297e80b953f4cd4cd7ea1eabe824e8f2091de01
+  languageName: node
+  linkType: hard
+
 "signal-exit@npm:^3.0.0, signal-exit@npm:^3.0.2, signal-exit@npm:^3.0.3, signal-exit@npm:^3.0.7":
   version: 3.0.7
   resolution: "signal-exit@npm:3.0.7"
@@ -10192,7 +10346,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-support@npm:^0.5.16":
+"source-map-support@npm:^0.5.16, source-map-support@npm:^0.5.21":
   version: 0.5.21
   resolution: "source-map-support@npm:0.5.21"
   dependencies:
@@ -10296,6 +10450,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stackback@npm:0.0.2":
+  version: 0.0.2
+  resolution: "stackback@npm:0.0.2"
+  checksum: 2d4dc4e64e2db796de4a3c856d5943daccdfa3dd092e452a1ce059c81e9a9c29e0b9badba91b43ef0d5ff5c04ee62feb3bcc559a804e16faf447bac2d883aa99
+  languageName: node
+  linkType: hard
+
 "static-extend@npm:^0.1.1":
   version: 0.1.2
   resolution: "static-extend@npm:0.1.2"
@@ -10831,6 +10992,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ufo@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "ufo@npm:1.0.1"
+  checksum: 63024876f21b7cc44267255a8043062046d3215e09212bd682787a13ccf1e0c5d23f7686a7f1bc7ac9f34c7e8a88100af234f42b509db50f17ce638af6ac87cc
+  languageName: node
+  linkType: hard
+
 "uglify-js@npm:^3.1.4":
   version: 3.17.4
   resolution: "uglify-js@npm:3.17.4"
@@ -11088,6 +11256,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"v8-to-istanbul@npm:^9.0.0":
+  version: 9.0.1
+  resolution: "v8-to-istanbul@npm:9.0.1"
+  dependencies:
+    "@jridgewell/trace-mapping": ^0.3.12
+    "@types/istanbul-lib-coverage": ^2.0.1
+    convert-source-map: ^1.6.0
+  checksum: a49c34bf0a3af0c11041a3952a2600913904a983bd1bc87148b5c033bc5c1d02d5a13620fcdbfa2c60bc582a2e2970185780f0c844b4c3a220abf405f8af6311
+  languageName: node
+  linkType: hard
+
 "validate-npm-package-license@npm:^3.0.1":
   version: 3.0.4
   resolution: "validate-npm-package-license@npm:3.0.4"
@@ -11105,6 +11284,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-node@npm:0.27.1":
+  version: 0.27.1
+  resolution: "vite-node@npm:0.27.1"
+  dependencies:
+    cac: ^6.7.14
+    debug: ^4.3.4
+    mlly: ^1.1.0
+    pathe: ^0.2.0
+    picocolors: ^1.0.0
+    source-map: ^0.6.1
+    source-map-support: ^0.5.21
+    vite: ^3.0.0 || ^4.0.0
+  bin:
+    vite-node: vite-node.mjs
+  checksum: 1cd6b40395365e30edaf926b7cfec03230c92a99ee6565c79b3b2ac9b35863843ad2f24536e80c1f816b49fae55e7ab9dabf3a40fe61ea65d4d5e4774b0f60af
+  languageName: node
+  linkType: hard
+
 "vite@npm:^3.0.0 || ^4.0.0, vite@npm:^4.0.0":
   version: 4.0.4
   resolution: "vite@npm:4.0.4"
@@ -11143,6 +11340,51 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vitest@npm:0.27.1":
+  version: 0.27.1
+  resolution: "vitest@npm:0.27.1"
+  dependencies:
+    "@types/chai": ^4.3.4
+    "@types/chai-subset": ^1.3.3
+    "@types/node": "*"
+    acorn: ^8.8.1
+    acorn-walk: ^8.2.0
+    cac: ^6.7.14
+    chai: ^4.3.7
+    debug: ^4.3.4
+    local-pkg: ^0.4.2
+    picocolors: ^1.0.0
+    source-map: ^0.6.1
+    strip-literal: ^1.0.0
+    tinybench: ^2.3.1
+    tinypool: ^0.3.0
+    tinyspy: ^1.0.2
+    vite: ^3.0.0 || ^4.0.0
+    vite-node: 0.27.1
+    why-is-node-running: ^2.2.2
+  peerDependencies:
+    "@edge-runtime/vm": "*"
+    "@vitest/browser": "*"
+    "@vitest/ui": "*"
+    happy-dom: "*"
+    jsdom: "*"
+  peerDependenciesMeta:
+    "@edge-runtime/vm":
+      optional: true
+    "@vitest/browser":
+      optional: true
+    "@vitest/ui":
+      optional: true
+    happy-dom:
+      optional: true
+    jsdom:
+      optional: true
+  bin:
+    vitest: vitest.mjs
+  checksum: 635b83429c74db4b9e10954ffd7eb21c9927fc83ea4c53e935cf2d8d15636b07b7482fa0c9469a32248da6570bdabfee08b9bc3b57d7b2a52861533115f9c8bc
+  languageName: node
+  linkType: hard
+
 "vitest@npm:^0.25.6":
   version: 0.25.8
   resolution: "vitest@npm:0.25.8"
@@ -11426,6 +11668,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"why-is-node-running@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "why-is-node-running@npm:2.2.2"
+  dependencies:
+    siginfo: ^2.0.0
+    stackback: 0.0.2
+  bin:
+    why-is-node-running: cli.js
+  checksum: 50820428f6a82dfc3cbce661570bcae9b658723217359b6037b67e495255409b4c8bc7931745f5c175df71210450464517cab32b2f7458ac9c40b4925065200a
+  languageName: node
+  linkType: hard
+
 "wide-align@npm:^1.1.2, wide-align@npm:^1.1.5":
   version: 1.1.5
   resolution: "wide-align@npm:1.1.5"
@@ -11547,6 +11801,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"y18n@npm:^5.0.5":
+  version: 5.0.8
+  resolution: "y18n@npm:5.0.8"
+  checksum: 54f0fb95621ee60898a38c572c515659e51cc9d9f787fb109cef6fde4befbe1c4602dc999d30110feee37456ad0f1660fa2edcfde6a9a740f86a290999550d30
+  languageName: node
+  linkType: hard
+
 "yallist@npm:^2.1.2":
   version: 2.1.2
   resolution: "yallist@npm:2.1.2"
@@ -11568,6 +11829,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.9":
+  version: 20.2.9
+  resolution: "yargs-parser@npm:20.2.9"
+  checksum: 8bb69015f2b0ff9e17b2c8e6bfe224ab463dd00ca211eece72a4cd8a906224d2703fb8a326d36fdd0e68701e201b2a60ed7cf81ce0fd9b3799f9fe7745977ae3
+  languageName: node
+  linkType: hard
+
+"yargs@npm:^16.2.0":
+  version: 16.2.0
+  resolution: "yargs@npm:16.2.0"
+  dependencies:
+    cliui: ^7.0.2
+    escalade: ^3.1.1
+    get-caller-file: ^2.0.5
+    require-directory: ^2.1.1
+    string-width: ^4.2.0
+    y18n: ^5.0.5
+    yargs-parser: ^20.2.2
+  checksum: b14afbb51e3251a204d81937c86a7e9d4bdbf9a2bcee38226c900d00f522969ab675703bee2a6f99f8e20103f608382936034e64d921b74df82b63c07c5e8f59
+  languageName: node
+  linkType: hard
+
 "yauzl@npm:^2.10.0":
   version: 2.10.0
   resolution: "yauzl@npm:2.10.0"