diff --git a/frappe/index.js b/frappe/index.js
index f9a0c676..058fce6e 100644
--- a/frappe/index.js
+++ b/frappe/index.js
@@ -6,6 +6,7 @@ const {
   DEFAULT_INTERNAL_PRECISION,
   DEFAULT_DISPLAY_PRECISION,
 } = require('./utils/consts');
+const { markRaw } = require('vue');
 
 module.exports = {
   initializeAndRegister(customModels = {}, force = false) {
@@ -55,7 +56,12 @@ module.exports = {
       display = parseInt(display);
     }
 
-    this.pesa = getMoneyMaker({ currency, precision, display });
+    this.pesa = getMoneyMaker({
+      currency,
+      precision,
+      display,
+      wrapper: markRaw,
+    });
   },
 
   init(force) {
diff --git a/models/doctype/GSTR3B/GSTR3BPrintView.vue b/models/doctype/GSTR3B/GSTR3BPrintView.vue
index 668c00ad..db931fdf 100644
--- a/models/doctype/GSTR3B/GSTR3BPrintView.vue
+++ b/models/doctype/GSTR3B/GSTR3BPrintView.vue
@@ -2,18 +2,28 @@
   <div>
     <div class="row no-gutters">
       <div class="col-8 mx-auto text-right mt-4">
-        <f-button primary @click="$emit('makePDF', $refs.printComponent.innerHTML)">{{ t('PDF') }}</f-button>
+        <f-button
+          primary
+          @click="$emit('makePDF', $refs.printComponent.innerHTML)"
+          >{{ t('PDF') }}</f-button
+        >
       </div>
     </div>
     <div ref="printComponent" class="col-8 bg-white mt-4 mx-auto border shadow">
-      <div class="print-format" style="padding: 3.5rem; font-size: 8pt !important;">
+      <div
+        class="print-format"
+        style="padding: 3.5rem; font-size: 8pt !important"
+      >
         <div>
           <h3 class="text-center">GSTR3B-Form</h3>
           <h5>GSTIN: &nbsp; {{ jsonData.gstin }}</h5>
           <h5>Period: &nbsp; {{ jsonData.ret_period }}</h5>
         </div>
 
-        <h5>3.1&nbsp;&nbsp;Details of Outward Supplies and inward supplies liable to reverse charge</h5>
+        <h5>
+          3.1&nbsp;&nbsp;Details of Outward Supplies and inward supplies liable
+          to reverse charge
+        </h5>
         <table class="table table-bordered">
           <thead>
             <tr>
@@ -27,7 +37,10 @@
           </thead>
           <tbody>
             <tr>
-              <td>(a) Outward taxable supplies(other than zero rated, nil rated and exempted</td>
+              <td>
+                (a) Outward taxable supplies(other than zero rated, nil rated
+                and exempted
+              </td>
               <td class="right">{{ jsonData.sup_details.osup_det.txval }}</td>
               <td class="right">{{ jsonData.sup_details.osup_det.iamt }}</td>
               <td class="right">{{ jsonData.sup_details.osup_det.camt }}</td>
@@ -44,7 +57,9 @@
             </tr>
             <tr>
               <td>(b) Other outward supplies(Nil rated,Exempted)</td>
-              <td class="right">{{ jsonData.sup_details.osup_nil_exmp.txval }}</td>
+              <td class="right">
+                {{ jsonData.sup_details.osup_nil_exmp.txval }}
+              </td>
               <td class="disabled"></td>
               <td class="disabled"></td>
               <td class="disabled"></td>
@@ -60,7 +75,9 @@
             </tr>
             <tr>
               <td>(e) Non-GST outward supplies</td>
-              <td class="right">{{ jsonData.sup_details.osup_nongst.txval }}</td>
+              <td class="right">
+                {{ jsonData.sup_details.osup_nongst.txval }}
+              </td>
               <td class="disabled"></td>
               <td class="disabled"></td>
               <td class="disabled"></td>
@@ -69,7 +86,11 @@
           </tbody>
         </table>
 
-        <h5>3.2&nbsp;&nbsp;Of the supplies shown in 3.1 (a) above, details of inter-State supplies made to unregisterd persons, composition taxable persons and UIN holders</h5>
+        <h5>
+          3.2&nbsp;&nbsp;Of the supplies shown in 3.1 (a) above, details of
+          inter-State supplies made to unregisterd persons, composition taxable
+          persons and UIN holders
+        </h5>
         <table class="table table-bordered">
           <thead>
             <tr>
@@ -83,17 +104,26 @@
             <tr>
               <td>Supplies made to Unregistered Persons</td>
               <td class="right">
-                <div v-for="(row, i) in jsonData.inter_sup.unreg_details" :key="i">
+                <div
+                  v-for="(row, i) in jsonData.inter_sup.unreg_details"
+                  :key="i"
+                >
                   <p>{{ row.pos }}</p>
                 </div>
               </td>
               <td class="right">
-                <div v-for="(row, i) in jsonData.inter_sup.unreg_details" :key="i">
+                <div
+                  v-for="(row, i) in jsonData.inter_sup.unreg_details"
+                  :key="i"
+                >
                   <p>{{ row.txval }}</p>
                 </div>
               </td>
               <td class="right">
-                <div v-for="(row, i) in jsonData.inter_sup.unreg_details" :key="i">
+                <div
+                  v-for="(row, i) in jsonData.inter_sup.unreg_details"
+                  :key="i"
+                >
                   <p>{{ row.iamt }}</p>
                 </div>
               </td>
@@ -101,17 +131,26 @@
             <tr>
               <td>Suppliies made to Composition Taxable Persons</td>
               <td class="right">
-                <div v-for="(row, i) in jsonData.inter_sup.comp_details" :key="i">
+                <div
+                  v-for="(row, i) in jsonData.inter_sup.comp_details"
+                  :key="i"
+                >
                   <p>{{ row.pos }}</p>
                 </div>
               </td>
               <td class="right">
-                <div v-for="(row, i) in jsonData.inter_sup.comp_details" :key="i">
+                <div
+                  v-for="(row, i) in jsonData.inter_sup.comp_details"
+                  :key="i"
+                >
                   <p>{{ row.txval }}</p>
                 </div>
               </td>
               <td class="right">
-                <div v-for="(row, i) in jsonData.inter_sup.comp_details" :key="i">
+                <div
+                  v-for="(row, i) in jsonData.inter_sup.comp_details"
+                  :key="i"
+                >
                   <p>{{ row.iamt }}</p>
                 </div>
               </td>
@@ -119,17 +158,26 @@
             <tr>
               <td>Supplies made to UIN holders</td>
               <td class="right">
-                <div v-for="(row, i) in jsonData.inter_sup.uin_details" :key="i">
+                <div
+                  v-for="(row, i) in jsonData.inter_sup.uin_details"
+                  :key="i"
+                >
                   <p>{{ row.pos }}</p>
                 </div>
               </td>
               <td class="right">
-                <div v-for="(row, i) in jsonData.inter_sup.uin_details" :key="i">
+                <div
+                  v-for="(row, i) in jsonData.inter_sup.uin_details"
+                  :key="i"
+                >
                   <p>{{ row.txval }}</p>
                 </div>
               </td>
               <td class="right">
-                <div v-for="(row, i) in jsonData.inter_sup.uin_details" :key="i">
+                <div
+                  v-for="(row, i) in jsonData.inter_sup.uin_details"
+                  :key="i"
+                >
                   <p>{{ row.iamt }}</p>
                 </div>
               </td>
@@ -173,7 +221,10 @@
               <td class="right">{{ jsonData.itc_elg.itc_avl[1].csamt }}</td>
             </tr>
             <tr>
-              <td>&nbsp; (3) Inward supplies liable to reverse charge (other than 1 & 2 above)</td>
+              <td>
+                &nbsp; (3) Inward supplies liable to reverse charge (other than
+                1 & 2 above)
+              </td>
               <td class="right">{{ jsonData.itc_elg.itc_avl[2].iamt }}</td>
               <td class="right">{{ jsonData.itc_elg.itc_avl[2].camt }}</td>
               <td class="right">{{ jsonData.itc_elg.itc_avl[2].samt }}</td>
@@ -251,7 +302,10 @@
           </tbody>
         </table>
 
-        <h5>5. &nbsp;&nbsp; Values of exempt, nil rated and non-GST inward supplies</h5>
+        <h5>
+          5. &nbsp;&nbsp; Values of exempt, nil rated and non-GST inward
+          supplies
+        </h5>
         <table class="table table-bordered">
           <thead>
             <tr>
@@ -262,14 +316,24 @@
           </thead>
           <tbody>
             <tr>
-              <td>From a supplier under composition scheme, Exempt and Nil rated</td>
-              <td class="right">{{ jsonData.inward_sup.isup_details[0].inter }}</td>
-              <td class="right">{{ jsonData.inward_sup.isup_details[0].intra }}</td>
+              <td>
+                From a supplier under composition scheme, Exempt and Nil rated
+              </td>
+              <td class="right">
+                {{ jsonData.inward_sup.isup_details[0].inter }}
+              </td>
+              <td class="right">
+                {{ jsonData.inward_sup.isup_details[0].intra }}
+              </td>
             </tr>
             <tr>
               <td>Non GST Inward Supplies</td>
-              <td class="right">{{ jsonData.inward_sup.isup_details[1].inter }}</td>
-              <td class="right">{{ jsonData.inward_sup.isup_details[1].intra }}</td>
+              <td class="right">
+                {{ jsonData.inward_sup.isup_details[1].inter }}
+              </td>
+              <td class="right">
+                {{ jsonData.inward_sup.isup_details[1].intra }}
+              </td>
             </tr>
           </tbody>
         </table>
@@ -282,11 +346,12 @@
 export default {
   name: 'GSTR3BPrintView',
   props: ['doc'],
+  emits: ['makePDF'],
   computed: {
     jsonData() {
       return JSON.parse(this.doc.jsonData);
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -300,4 +365,3 @@ export default {
   text-align: right;
 }
 </style>
-
diff --git a/models/doctype/Party/Customer.js b/models/doctype/Party/Customer.js
index c2877169..3bf02a0c 100644
--- a/models/doctype/Party/Customer.js
+++ b/models/doctype/Party/Customer.js
@@ -1,6 +1,6 @@
 import router from '@/router';
-import frappe from 'frappe';
-import { t } from 'frappe';
+import frappe, { t } from 'frappe';
+import { h } from 'vue';
 import PartyWidget from './PartyWidget.vue';
 
 export default {
@@ -44,9 +44,9 @@ export default {
     },
   ],
   quickEditWidget: (doc) => ({
-    render(h) {
+    render() {
       return h(PartyWidget, {
-        props: { doc },
+        doc,
       });
     },
   }),
diff --git a/models/doctype/Party/Supplier.js b/models/doctype/Party/Supplier.js
index 51f9dc34..5d211ce1 100644
--- a/models/doctype/Party/Supplier.js
+++ b/models/doctype/Party/Supplier.js
@@ -1,6 +1,6 @@
 import router from '@/router';
-import frappe from 'frappe';
-import { t } from 'frappe';
+import frappe, { t } from 'frappe';
+import { h } from 'vue';
 import PartyWidget from './PartyWidget.vue';
 
 export default {
@@ -44,9 +44,9 @@ export default {
     },
   ],
   quickEditWidget: (doc) => ({
-    render(h) {
+    render() {
       return h(PartyWidget, {
-        props: { doc },
+        doc,
       });
     },
   }),
diff --git a/models/doctype/SalesInvoice/SalesInvoicePrint.vue b/models/doctype/SalesInvoice/SalesInvoicePrint.vue
index b1935517..1e5bebd6 100644
--- a/models/doctype/SalesInvoice/SalesInvoicePrint.vue
+++ b/models/doctype/SalesInvoice/SalesInvoicePrint.vue
@@ -3,9 +3,19 @@
     <div class="row no-gutters">
       <div v-if="showInvoiceCustomizer" class="col-3 mt-4 mx-auto"></div>
       <div class="col-8 mx-auto text-right mt-4">
-        <f-button primary @click="$emit('send', $refs.printComponent.innerHTML)">{{ t('Send') }}</f-button>
-        <f-button secondary @click="toggleCustomizer">{{ t('Customize') }}</f-button>
-        <f-button secondary @click="$emit('makePDF', $refs.printComponent.innerHTML)">{{ t('PDF') }}</f-button>
+        <f-button
+          primary
+          @click="$emit('send', $refs.printComponent.innerHTML)"
+          >{{ t('Send') }}</f-button
+        >
+        <f-button secondary @click="toggleCustomizer">{{
+          t('Customize')
+        }}</f-button>
+        <f-button
+          secondary
+          @click="$emit('makePDF', $refs.printComponent.innerHTML)"
+          >{{ t('PDF') }}</f-button
+        >
       </div>
     </div>
     <div class="row no-gutters">
@@ -20,7 +30,10 @@
           @updateTemplateView="updateTemplateView"
         />
       </div>
-      <div class="col-8 bg-white mt-4 mx-auto border shadow" ref="printComponent">
+      <div
+        class="col-8 bg-white mt-4 mx-auto border shadow"
+        ref="printComponent"
+      >
         <component
           :themeColor="themeColor"
           :font="font"
@@ -42,14 +55,15 @@ import InvoiceCustomizer from '@/components/InvoiceCustomizer';
 const invoiceTemplates = {
   'Basic I': InvoiceTemplate1,
   'Basic II': InvoiceTemplate2,
-  Modern: InvoiceTemplate3
+  Modern: InvoiceTemplate3,
 };
 
 export default {
   name: 'InvoicePrint',
   props: ['doc'],
+  emits: ['send', 'makePDF'],
   components: {
-    InvoiceCustomizer
+    InvoiceCustomizer,
   },
   data() {
     return {
@@ -57,7 +71,7 @@ export default {
       themeColor: undefined,
       template: undefined,
       font: undefined,
-      usedForReRender: 0
+      usedForReRender: 0,
     };
   },
   async created() {
@@ -96,7 +110,7 @@ export default {
     },
     updateTemplateView() {
       this.usedForReRender += 1;
-    }
-  }
+    },
+  },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/package.json b/package.json
index 467ff4fc..14859340 100644
--- a/package.json
+++ b/package.json
@@ -27,8 +27,8 @@
     "luxon": "^2.0.2",
     "pesa": "^1.1.3",
     "sqlite3": "npm:@vscode/sqlite3@^5.0.7",
-    "vue": "^2.6.14",
-    "vue-router": "^3.5.3"
+    "vue": "^3.2.30",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
diff --git a/public/index.html b/public/index.html
index aec5dcd9..0ca6eee1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,7 +11,6 @@
     <noscript>
       <strong>We're sorry but Frappe Books doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <!-- built files will replace body.innerHTML -->
   </body>
 </html>
diff --git a/src/background.js b/src/background.js
index 8b52fe33..89898da6 100644
--- a/src/background.js
+++ b/src/background.js
@@ -9,7 +9,7 @@ import electron, {
   protocol,
   shell,
 } from 'electron';
-import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
+import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer';
 import Store from 'electron-store';
 import { autoUpdater } from 'electron-updater';
 import fs from 'fs/promises';
@@ -279,14 +279,8 @@ app.on('activate', () => {
 
 app.on('ready', async () => {
   if (isDevelopment && !process.env.IS_TEST) {
-    // Install Vue Devtools
-    // Devtools extensions are broken in Electron 6.0.0 and greater
-    // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info
-    // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode
-    // If you are not using Windows 10 dark mode, you may uncomment these lines
-    // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines
     try {
-      await installExtension(VUEJS_DEVTOOLS);
+      await installExtension(VUEJS3_DEVTOOLS);
     } catch (e) {
       console.error('Vue Devtools failed to install:', e.toString());
     }
diff --git a/src/components/BackLink.vue b/src/components/BackLink.vue
index 0ccee779..1e3d0a43 100644
--- a/src/components/BackLink.vue
+++ b/src/components/BackLink.vue
@@ -1,7 +1,6 @@
-<template>
+<template #title>
   <a
     class="cursor-pointer font-semibold flex items-center"
-    slot="title"
     @click="$router.back()"
   >
     <feather-icon name="chevron-left" class="w-5 h-5" />
diff --git a/src/components/Button.vue b/src/components/Button.vue
index 7ebda16d..5a18f317 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -4,7 +4,6 @@
     :style="style"
     :class="_class"
     v-bind="$attrs"
-    v-on="$listeners"
   >
     <slot></slot>
   </button>
diff --git a/src/components/Charts/DonutChart.vue b/src/components/Charts/DonutChart.vue
index 6ffdeb2f..9c9dbd0c 100644
--- a/src/components/Charts/DonutChart.vue
+++ b/src/components/Charts/DonutChart.vue
@@ -101,6 +101,7 @@ export default {
     textOffsetX: { default: 0, type: Number },
     textOffsetY: { default: 0, type: Number },
   },
+  emits: ['change'],
   computed: {
     cx() {
       return 50 + this.offsetX;
diff --git a/src/components/Controls/AutoComplete.vue b/src/components/Controls/AutoComplete.vue
index 1e2955ad..19098f5a 100644
--- a/src/components/Controls/AutoComplete.vue
+++ b/src/components/Controls/AutoComplete.vue
@@ -38,6 +38,7 @@ import { fuzzyMatch } from '@/utils';
 
 export default {
   name: 'AutoComplete',
+  emits: ['focus'],
   extends: Base,
   components: {
     Dropdown,
diff --git a/src/components/Controls/Base.vue b/src/components/Controls/Base.vue
index f536ca5d..9e693e91 100644
--- a/src/components/Controls/Base.vue
+++ b/src/components/Controls/Base.vue
@@ -20,7 +20,6 @@
 </template>
 
 <script>
-import { showMessageDialog } from '../../utils';
 export default {
   name: 'Base',
   props: [
@@ -33,6 +32,7 @@ export default {
     'readOnly',
     'autofocus',
   ],
+  emits: ['focus', 'input', 'change'],
   inject: {
     doctype: {
       default: null,
diff --git a/src/components/Controls/Check.vue b/src/components/Controls/Check.vue
index 3b2e41dc..0dfac1e9 100644
--- a/src/components/Controls/Check.vue
+++ b/src/components/Controls/Check.vue
@@ -70,11 +70,12 @@ import Base from './Base';
 export default {
   name: 'Check',
   extends: Base,
+  emits: ['focus'],
   data() {
     return {
       offBorderColor: 'rgba(17, 43, 66, 0.201322)',
       offColor: '#FFFFFF',
-      color: '#A1ABB4'
+      color: '#A1ABB4',
     };
   },
   computed: {
diff --git a/src/components/Controls/Color.vue b/src/components/Controls/Color.vue
index 1e70ccf5..d5005f75 100644
--- a/src/components/Controls/Color.vue
+++ b/src/components/Controls/Color.vue
@@ -4,7 +4,7 @@
       {{ df.label }}
     </div>
     <Popover placement="bottom-end">
-      <template v-slot:target="{ togglePopover }">
+      <template #target="{ togglePopover }">
         <div
           tabindex="0"
           :class="inputClasses"
@@ -25,29 +25,31 @@
           </div>
         </div>
       </template>
-      <div class="text-sm py-3 px-2 text-center" slot="content">
-        <div>
-          <Row class="border-none" :column-count="5" gap="0.5rem">
-            <div
-              v-for="color in colors"
-              :key="color.value"
-              class="w-4 h-4 rounded cursor-pointer"
-              :style="{ backgroundColor: color.value }"
-              @click="setColorValue(color.value)"
-            ></div>
-          </Row>
+      <template #content>
+        <div class="text-sm py-3 px-2 text-center">
+          <div>
+            <Row class="border-none" :column-count="5" gap="0.5rem">
+              <div
+                v-for="color in colors"
+                :key="color.value"
+                class="w-4 h-4 rounded cursor-pointer"
+                :style="{ backgroundColor: color.value }"
+                @click="setColorValue(color.value)"
+              ></div>
+            </Row>
+          </div>
+          <div class="mt-3 w-28">
+            <input
+              type="text"
+              :placeholder="t('Custom Hex')"
+              :class="inputClasses"
+              :value="value"
+              @change="(e) => setColorValue(e.target.value)"
+              class="bg-gray-100"
+            />
+          </div>
         </div>
-        <div class="mt-3 w-28">
-          <input
-            type="text"
-            :placeholder="t('Custom Hex')"
-            :class="inputClasses"
-            :value="value"
-            @change="e => setColorValue(e.target.value)"
-            class="bg-gray-100"
-          />
-        </div>
-      </div>
+      </template>
     </Popover>
   </div>
 </template>
@@ -62,7 +64,7 @@ export default {
   extends: Base,
   components: {
     Popover,
-    Row
+    Row,
   },
   methods: {
     setColorValue(value) {
@@ -72,16 +74,16 @@ export default {
       if (/^#[0-9A-F]{6}$/i.test(value)) {
         this.triggerChange(value);
       }
-    }
+    },
   },
   computed: {
     colors() {
       return this.df.colors;
     },
     selectedColorLabel() {
-      let color = this.colors.find(c => this.value === c.value);
+      let color = this.colors.find((c) => this.value === c.value);
       return color ? color.label : this.value;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/components/Controls/Currency.vue b/src/components/Controls/Currency.vue
index 79d43f1a..5a5f576d 100644
--- a/src/components/Controls/Currency.vue
+++ b/src/components/Controls/Currency.vue
@@ -34,6 +34,7 @@ import Float from './Float';
 export default {
   name: 'Currency',
   extends: Float,
+  emits: ['input', 'focus'],
   data() {
     return {
       showInput: false,
diff --git a/src/components/Controls/DynamicLink.vue b/src/components/Controls/DynamicLink.vue
index e9bdf2af..5920d54c 100644
--- a/src/components/Controls/DynamicLink.vue
+++ b/src/components/Controls/DynamicLink.vue
@@ -12,7 +12,7 @@ export default {
       }
     });
   },
-  destroyed() {
+  unmounted() {
     this.targetWatcher();
   },
   methods: {
diff --git a/src/components/Controls/FormControl.js b/src/components/Controls/FormControl.js
index b8a6c29b..39465767 100644
--- a/src/components/Controls/FormControl.js
+++ b/src/components/Controls/FormControl.js
@@ -12,10 +12,11 @@ import Float from './Float';
 import Currency from './Currency';
 import Text from './Text';
 import Color from './Color';
+import { h } from 'vue';
 
 export default {
   name: 'FormControl',
-  render(h) {
+  render() {
     let controls = {
       Data,
       Select,
@@ -30,13 +31,12 @@ export default {
       Float,
       Currency,
       Text,
-      Color
+      Color,
     };
     let { df } = this.$attrs;
     return h(controls[df.fieldtype] || Data, {
-      props: this.$attrs,
-      on: this.$listeners,
-      ref: 'control'
+      ...this.$attrs,
+      ref: 'control',
     });
   },
   methods: {
@@ -45,6 +45,6 @@ export default {
     },
     getInput() {
       return this.$refs.control.$refs.input;
-    }
-  }
+    },
+  },
 };
diff --git a/src/components/Controls/Link.vue b/src/components/Controls/Link.vue
index f14ae78c..ce4bc965 100644
--- a/src/components/Controls/Link.vue
+++ b/src/components/Controls/Link.vue
@@ -3,10 +3,12 @@ import frappe from 'frappe';
 import AutoComplete from './AutoComplete';
 import Badge from '@/components/Badge';
 import { openQuickEdit } from '@/utils';
+import { markRaw } from 'vue';
 
 export default {
   name: 'Link',
   extends: AutoComplete,
+  emits: ['new-doc'],
   methods: {
     async getSuggestions(keyword = '') {
       let doctype = this.getTarget();
@@ -64,7 +66,7 @@ export default {
         label: 'Create',
         value: 'Create',
         action: () => this.openNewDoc(),
-        component: {
+        component: markRaw({
           template: `
                 <div class="flex items-center font-semibold">{{ t('Create') }}
                   <Badge color="blue" class="ml-2" v-if="isNewValue">{{ linkValue }}</Badge>
@@ -78,7 +80,7 @@ export default {
             },
           },
           components: { Badge },
-        },
+        }),
       };
     },
     async getFilters(keyword) {
diff --git a/src/components/Controls/Select.vue b/src/components/Controls/Select.vue
index f4960db1..24b31f6a 100644
--- a/src/components/Controls/Select.vue
+++ b/src/components/Controls/Select.vue
@@ -60,6 +60,7 @@ import Base from './Base';
 export default {
   name: 'Select',
   extends: Base,
+  emits: ['focus'],
   methods: {
     map(v) {
       if (this.df.map) {
diff --git a/src/components/Controls/Table.vue b/src/components/Controls/Table.vue
index 30493b69..78143db9 100644
--- a/src/components/Controls/Table.vue
+++ b/src/components/Controls/Table.vue
@@ -9,7 +9,7 @@
         :class="{
           'px-2 py-3': size === 'small',
           'px-3 py-4': size !== 'small',
-          'text-right': isNumeric(df)
+          'text-right': isNumeric(df),
         }"
         v-for="df in tableFields"
         :key="df.fieldname"
@@ -31,7 +31,7 @@
       :ratio="ratio"
       class="text-gray-500 cursor-pointer border-transparent px-2 w-full"
       v-if="!isReadOnly"
-      @click.native="addRow"
+      @click="addRow"
     >
       <div class="flex items-center pl-1">
         <feather-icon name="plus" class="w-4 h-4 text-gray-500" />
@@ -40,7 +40,7 @@
         class="flex justify-between"
         :class="{
           'px-2 py-3': size === 'small',
-          'px-3 py-4': size !== 'small'
+          'px-3 py-4': size !== 'small',
         }"
       >
         {{ t('Add Row') }}
@@ -50,7 +50,7 @@
         class="text-right"
         :class="{
           'px-2 py-3': size === 'small',
-          'px-3 py-4': size !== 'small'
+          'px-3 py-4': size !== 'small',
         }"
         v-if="maxRowsBeforeOverflow && value.length > maxRowsBeforeOverflow"
       >
@@ -71,15 +71,15 @@ export default {
   extends: Base,
   props: {
     showHeader: {
-      default: true
+      default: true,
     },
     maxRowsBeforeOverflow: {
-      default: 0
-    }
+      default: 0,
+    },
   },
   components: {
     Row,
-    TableRow
+    TableRow,
   },
   data: () => ({ rowContainerHeight: null }),
   watch: {
@@ -95,8 +95,8 @@ export default {
             this.rowContainerHeight = `${containerHeight}px`;
           });
         }
-      }
-    }
+      },
+    },
   },
   methods: {
     focus() {},
@@ -109,13 +109,13 @@ export default {
     },
     removeRow(row) {
       let rows = this.value || [];
-      rows = rows.filter(_row => _row !== row);
+      rows = rows.filter((_row) => _row !== row);
       this.triggerChange(rows);
     },
     scrollToRow(index) {
       let row = this.$refs['table-row'][index];
       row && row.$el.scrollIntoView({ block: 'nearest' });
-    }
+    },
   },
   computed: {
     ratio() {
@@ -123,8 +123,8 @@ export default {
     },
     tableFields() {
       let meta = frappe.getMeta(this.df.childtype);
-      return meta.tableFields.map(fieldname => meta.getField(fieldname));
-    }
-  }
+      return meta.tableFields.map((fieldname) => meta.getField(fieldname));
+    },
+  },
 };
 </script>
diff --git a/src/components/Controls/TableRow.vue b/src/components/Controls/TableRow.vue
index 60fee8c8..9460db09 100644
--- a/src/components/Controls/TableRow.vue
+++ b/src/components/Controls/TableRow.vue
@@ -39,6 +39,7 @@ import { getErrorMessage } from '../../errorHandling';
 export default {
   name: 'TableRow',
   props: ['row', 'tableFields', 'size', 'ratio', 'isNumeric'],
+  emits: ['remove'],
   components: {
     Row,
   },
@@ -59,14 +60,14 @@ export default {
         return;
       }
 
-      this.$set(this.errors, df.fieldname, null);
+      this.errors[df.fieldname] = null;
       const oldValue = this.row.get(df.fieldname);
       if (oldValue === value) {
         return;
       }
 
       this.row.set(df.fieldname, value).catch((e) => {
-        this.$set(this.errors, df.fieldname, getErrorMessage(e, this.row));
+        this.errors[df.fieldname] = getErrorMessage(e, this.row);
       });
     },
     getErrorString() {
diff --git a/src/components/Controls/Text.vue b/src/components/Controls/Text.vue
index 8c522a30..4c6737fa 100644
--- a/src/components/Controls/Text.vue
+++ b/src/components/Controls/Text.vue
@@ -9,9 +9,9 @@
       :class="['resize-none', inputClasses]"
       :value="value"
       :placeholder="inputPlaceholder"
-      @blur="e => triggerChange(e.target.value)"
-      @focus="e => $emit('focus', e)"
-      @input="e => $emit('input', e)"
+      @blur="(e) => triggerChange(e.target.value)"
+      @focus="(e) => $emit('focus', e)"
+      @input="(e) => $emit('input', e)"
     ></textarea>
   </div>
 </template>
@@ -21,6 +21,7 @@ import Base from './Base';
 
 export default {
   name: 'Text',
-  extends: Base
+  extends: Base,
+  emits: ['focus', 'input'],
 };
 </script>
diff --git a/src/components/DatePicker/DatePicker.vue b/src/components/DatePicker/DatePicker.vue
index 616a3746..00cbaf82 100644
--- a/src/components/DatePicker/DatePicker.vue
+++ b/src/components/DatePicker/DatePicker.vue
@@ -1,6 +1,6 @@
 <template>
   <Popover @open="selectCurrentMonthYear">
-    <template v-slot:target="{ togglePopover, handleBlur }">
+    <template #target="{ togglePopover, handleBlur }">
       <input
         type="text"
         :class="inputClass"
@@ -11,7 +11,7 @@
         @blur="handleBlur"
       />
     </template>
-    <template v-slot:content="{ togglePopover }">
+    <template #content="{ togglePopover }">
       <div class="text-left p-3 select-none">
         <div class="flex items-center justify-between">
           <span class="font-medium text-blue-500 text-base">
@@ -123,6 +123,7 @@ import Popover from '../Popover';
 export default {
   name: 'DatePicker',
   props: ['value', 'placeholder', 'readonly', 'formatValue', 'inputClass'],
+  emits: ['change'],
   components: {
     Popover,
   },
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 12778be2..a86562e8 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -4,71 +4,71 @@
     :hide-arrow="true"
     :placement="right ? 'bottom-end' : 'bottom-start'"
   >
-    <div
-      slot="target"
-      class="h-full"
-      v-on-outside-click="() => (isShown = false)"
-    >
-      <slot
-        :toggleDropdown="toggleDropdown"
-        :highlightItemUp="highlightItemUp"
-        :highlightItemDown="highlightItemDown"
-        :selectHighlightedItem="selectHighlightedItem"
-      ></slot>
-    </div>
-    <div slot="content" class="bg-white rounded w-full min-w-40">
-      <div class="p-1 max-h-64 overflow-auto text-sm">
-        <div v-if="isLoading" class="p-2 text-gray-600 italic">
-          {{ t('Loading...') }}
-        </div>
-        <div
-          v-if="!isLoading && dropdownItems.length === 0"
-          class="p-2 text-gray-600 italic"
-        >
-          {{ getEmptyMessage() }}
-        </div>
-        <template v-else>
-          <div v-for="d in dropdownItems" :key="d.label">
-            <div
-              v-if="d.isGroup"
-              class="
-                px-2
-                pt-3
-                pb-1
-                text-xs
-                uppercase
-                text-gray-700
-                font-semibold
-                tracking-wider
-              "
-            >
-              {{ d.label }}
-            </div>
-            <a
-              v-else
-              ref="items"
-              class="
-                block
-                p-2
-                rounded-md
-                mt-1
-                first:mt-0
-                cursor-pointer
-                truncate
-              "
-              :class="d.index === highlightedIndex ? 'bg-gray-100' : ''"
-              @mouseenter="highlightedIndex = d.index"
-              @mouseleave="highlightedIndex = -1"
-              @mousedown.prevent
-              @click="selectItem(d)"
-            >
-              <component :is="d.component" v-if="d.component" />
-              <template v-else>{{ d.label }}</template>
-            </a>
-          </div>
-        </template>
+    <template #target>
+      <div class="h-full" v-on-outside-click="() => (isShown = false)">
+        <slot
+          :toggleDropdown="toggleDropdown"
+          :highlightItemUp="highlightItemUp"
+          :highlightItemDown="highlightItemDown"
+          :selectHighlightedItem="selectHighlightedItem"
+        ></slot>
       </div>
-    </div>
+    </template>
+    <template #content>
+      <div class="bg-white rounded w-full min-w-40">
+        <div class="p-1 max-h-64 overflow-auto text-sm">
+          <div v-if="isLoading" class="p-2 text-gray-600 italic">
+            {{ t('Loading...') }}
+          </div>
+          <div
+            v-if="!isLoading && dropdownItems.length === 0"
+            class="p-2 text-gray-600 italic"
+          >
+            {{ getEmptyMessage() }}
+          </div>
+          <template v-else>
+            <div v-for="d in dropdownItems" :key="d.label">
+              <div
+                v-if="d.isGroup"
+                class="
+                  px-2
+                  pt-3
+                  pb-1
+                  text-xs
+                  uppercase
+                  text-gray-700
+                  font-semibold
+                  tracking-wider
+                "
+              >
+                {{ d.label }}
+              </div>
+              <a
+                v-else
+                ref="items"
+                class="
+                  block
+                  p-2
+                  rounded-md
+                  mt-1
+                  first:mt-0
+                  cursor-pointer
+                  truncate
+                "
+                :class="d.index === highlightedIndex ? 'bg-gray-100' : ''"
+                @mouseenter="highlightedIndex = d.index"
+                @mouseleave="highlightedIndex = -1"
+                @mousedown.prevent
+                @click="selectItem(d)"
+              >
+                <component :is="d.component" v-if="d.component" />
+                <template v-else>{{ d.label }}</template>
+              </a>
+            </div>
+          </template>
+        </div>
+      </div>
+    </template>
   </Popover>
 </template>
 
diff --git a/src/components/DropdownWithAction.vue b/src/components/DropdownWithAction.vue
deleted file mode 100644
index ab9ff846..00000000
--- a/src/components/DropdownWithAction.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <Dropdown v-bind="$attrs">
-    <template v-slot="{ toggleDropdown }">
-      <div @click="toggleDropdown()">
-        <slot></slot>
-      </div>
-    </template>
-  </Dropdown>
-</template>
-
-<script>
-import Dropdown from './Dropdown';
-
-export default {
-  name: 'DropdownWithAction',
-  components: {
-    Dropdown
-  }
-};
-</script>
-
-<style></style>
diff --git a/src/components/FeatherIcon.vue b/src/components/FeatherIcon.vue
index 0fd91409..1c042969 100644
--- a/src/components/FeatherIcon.vue
+++ b/src/components/FeatherIcon.vue
@@ -1,5 +1,6 @@
 <script>
 import feather from 'feather-icons';
+import { h } from 'vue';
 
 const validIcons = Object.keys(feather.icons);
 
@@ -7,38 +8,29 @@ export default {
   props: {
     name: {
       type: String,
+      // default: 'middle-finger',
       required: true,
-      validator(value) {
-        const valid = validIcons.includes(value);
-        if (!valid) {
-          console.warn(
-            `name property for feather-icon must be one of `,
-            validIcons
-          );
-        }
-        return valid;
-      }
-    }
+      validator: (value) => validIcons.includes(value),
+    },
   },
-  render(h) {
-    let icon = feather.icons[this.name];
-    return h('svg', {
-      attrs: Object.assign({}, icon.attrs, {
+  render() {
+    const icon = feather.icons[this.name];
+    const svg = h('svg', {
+      ...Object.assign({}, icon.attrs, {
         fill: 'none',
         stroke: 'currentColor',
         'stroke-linecap': 'round',
         'stroke-linejoin': 'round',
         'stroke-width': 1.5,
         width: null,
-        height: null
+        height: null,
       }),
-      on: this.$listeners,
       class: [icon.attrs.class],
-      domProps: {
-        innerHTML: icon.contents
-      }
+      innerHTML: icon.contents,
     });
-  }
+
+    return svg;
+  },
 };
 
 // https://github.com/frappe/frappejs/commits/master/ui/components/FeatherIcon.vue
diff --git a/src/components/FilterDropdown.vue b/src/components/FilterDropdown.vue
index cf780250..96eff3f3 100644
--- a/src/components/FilterDropdown.vue
+++ b/src/components/FilterDropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <Popover @close="emitFilterChange" placement="bottom-end">
-    <template v-slot:target="{ togglePopover }">
+    <template #target="{ togglePopover }">
       <Button :icon="true" @click="togglePopover()">
         <span class="flex items-center">
           <Icon name="filter" size="12" class="stroke-current text-gray-800" />
@@ -15,83 +15,103 @@
         </span>
       </Button>
     </template>
-    <div slot="content">
-      <div class="p-3">
-        <template v-if="filters.length">
-          <div
-            :key="filter.fieldname + frappe.getRandomString()"
-            v-for="(filter, i) in filters"
-            class="flex items-center justify-between text-base"
-            :class="i !== 0 && 'mt-2'"
-          >
-            <div class="flex">
-              <div class="w-24">
-                <FormControl
-                  size="small"
-                  input-class="bg-gray-100"
-                  :df="{
-                    placeholder: 'Field',
-                    fieldname: 'fieldname',
-                    fieldtype: 'Select',
-                    options: fieldOptions
-                  }"
-                  :value="filter.fieldname"
-                  @change="value => (filter.fieldname = value)"
-                />
-              </div>
-              <div class="ml-2 w-24">
-                <FormControl
-                  size="small"
-                  input-class="bg-gray-100"
-                  :df="{
-                    placeholder: 'Condition',
-                    fieldname: 'condition',
-                    fieldtype: 'Select',
-                    options: conditions
-                  }"
-                  :value="filter.condition"
-                  @change="value => (filter.condition = value)"
-                />
-              </div>
-              <div class="ml-2 w-24">
-                <FormControl
-                  size="small"
-                  input-class="bg-gray-100"
-                  :df="{
-                    placeholder: 'Value',
-                    fieldname: 'value',
-                    fieldtype: 'Data'
-                  }"
-                  :value="filter.value"
-                  @change="value => (filter.value = value)"
-                />
-              </div>
-            </div>
+    <template #content>
+      <div>
+        <div class="p-3">
+          <template v-if="filters.length">
             <div
-              class="ml-2 cursor-pointer w-5 h-5 flex-center hover:bg-gray-100 rounded-md"
+              :key="filter.fieldname + frappe.getRandomString()"
+              v-for="(filter, i) in filters"
+              class="flex items-center justify-between text-base"
+              :class="i !== 0 && 'mt-2'"
             >
-              <feather-icon
-                name="x"
-                class="w-4 h-4"
-                @click="removeFilter(filter)"
-              />
+              <div class="flex">
+                <div class="w-24">
+                  <FormControl
+                    size="small"
+                    input-class="bg-gray-100"
+                    :df="{
+                      placeholder: 'Field',
+                      fieldname: 'fieldname',
+                      fieldtype: 'Select',
+                      options: fieldOptions,
+                    }"
+                    :value="filter.fieldname"
+                    @change="(value) => (filter.fieldname = value)"
+                  />
+                </div>
+                <div class="ml-2 w-24">
+                  <FormControl
+                    size="small"
+                    input-class="bg-gray-100"
+                    :df="{
+                      placeholder: 'Condition',
+                      fieldname: 'condition',
+                      fieldtype: 'Select',
+                      options: conditions,
+                    }"
+                    :value="filter.condition"
+                    @change="(value) => (filter.condition = value)"
+                  />
+                </div>
+                <div class="ml-2 w-24">
+                  <FormControl
+                    size="small"
+                    input-class="bg-gray-100"
+                    :df="{
+                      placeholder: 'Value',
+                      fieldname: 'value',
+                      fieldtype: 'Data',
+                    }"
+                    :value="filter.value"
+                    @change="(value) => (filter.value = value)"
+                  />
+                </div>
+              </div>
+              <div
+                class="
+                  ml-2
+                  cursor-pointer
+                  w-5
+                  h-5
+                  flex-center
+                  hover:bg-gray-100
+                  rounded-md
+                "
+              >
+                <feather-icon
+                  name="x"
+                  class="w-4 h-4"
+                  @click="removeFilter(filter)"
+                />
+              </div>
             </div>
-          </div>
-        </template>
-        <template v-else>
-          <span class="text-base text-gray-600">{{
-            t('No filters selected')
-          }}</span>
-        </template>
+          </template>
+          <template v-else>
+            <span class="text-base text-gray-600">{{
+              t('No filters selected')
+            }}</span>
+          </template>
+        </div>
+        <div
+          class="
+            text-base
+            border-t
+            px-3
+            py-2
+            flex
+            items-center
+            text-gray-600
+            cursor-pointer
+            hover:bg-gray-100
+          "
+          @click="addNewFilter"
+        >
+          <feather-icon name="plus" class="w-4 h-4" />
+          <span class="ml-2">{{ t('Add a filter') }}</span>
+        </div>
       </div>
-      <div
-        class="text-base border-t px-3 py-2 flex items-center text-gray-600 cursor-pointer hover:bg-gray-100"
-        @click="addNewFilter"
-      >
-        <feather-icon name="plus" class="w-4 h-4" />
-        <span class="ml-2">{{ t('Add a filter') }}</span>
-      </div>
-    </div>
+    </template>
   </Popover>
 </template>
 
@@ -109,7 +129,7 @@ let conditions = [
   { label: 'Greater Than', value: '>' },
   { label: 'Less Than', value: '<' },
   { label: 'Is Empty', value: 'is null' },
-  { label: 'Is Not Empty', value: 'is not null' }
+  { label: 'Is Not Empty', value: 'is not null' },
 ];
 
 export default {
@@ -118,12 +138,13 @@ export default {
     Popover,
     Button,
     Icon,
-    FormControl
+    FormControl,
   },
   props: ['fields'],
+  emits: ['change'],
   data() {
     return {
-      filters: []
+      filters: [],
     };
   },
   created() {
@@ -138,11 +159,11 @@ export default {
       this.filters.push({ fieldname, condition, value });
     },
     removeFilter(filter) {
-      this.filters = this.filters.filter(f => f !== filter);
+      this.filters = this.filters.filter((f) => f !== filter);
     },
     setFilter(filters) {
       this.filters = [];
-      Object.keys(filters).map(fieldname => {
+      Object.keys(filters).map((fieldname) => {
         let parts = filters[fieldname];
         let condition, value;
         if (Array.isArray(parts)) {
@@ -166,24 +187,27 @@ export default {
       }, {});
 
       this.$emit('change', filters);
-    }
+    },
   },
   computed: {
     fieldOptions() {
-      return this.fields.map(df => ({ label: df.label, value: df.fieldname }));
+      return this.fields.map((df) => ({
+        label: df.label,
+        value: df.fieldname,
+      }));
     },
     conditions() {
       return conditions;
     },
     activeFilterCount() {
-      return this.filters.filter(filter => filter.value).length;
+      return this.filters.filter((filter) => filter.value).length;
     },
     filterAppliedMessage() {
       if (this.activeFilterCount === 1) {
         return this.t('1 filter applied');
       }
       return this.t('{0} filters applied', [this.activeFilterCount]);
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index 89233bbf..55a085a0 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -1,7 +1,6 @@
 <template>
   <component
     v-bind="$attrs"
-    v-on="$listeners"
     :is="iconComponent"
     :class="iconClasses"
     :active="active"
diff --git a/src/components/InvoiceCustomizer.vue b/src/components/InvoiceCustomizer.vue
index f67cc850..6da8305d 100644
--- a/src/components/InvoiceCustomizer.vue
+++ b/src/components/InvoiceCustomizer.vue
@@ -6,7 +6,9 @@
           <h4>Customize</h4>
         </div>
         <div class="col-6 text-right">
-          <f-button secondary @click="saveAndClose">{{ t('Save & Close') }}</f-button>
+          <f-button secondary @click="saveAndClose">{{
+            t('Save & Close')
+          }}</f-button>
         </div>
       </div>
       <div class="row">
@@ -14,7 +16,9 @@
           <form-layout :doc="doc" :fields="fields" @updateDoc="saveDoc" />
           <sketch-picker v-model="color" class="shadow-none" />
           <div class="mt-3">
-            <f-button secondary @click="openCompanySettings">{{ t('Company Settings') }}</f-button>
+            <f-button secondary @click="openCompanySettings">{{
+              t('Company Settings')
+            }}</f-button>
           </div>
         </div>
       </div>
@@ -27,15 +31,22 @@ import { Sketch } from 'vue-color';
 
 export default {
   name: 'InvoiceCustomizer',
+  emits: [
+    'changeTemplate',
+    'changeFont',
+    'closeInvoiceCustomizer',
+    'updateTemplateView',
+    'changeColor',
+  ],
   components: {
     FormLayout,
-    'sketch-picker': Sketch
+    'sketch-picker': Sketch,
   },
   data() {
     return {
       doc: null,
       fields: [],
-      color: {}
+      color: {},
     };
   },
   async created() {
@@ -43,7 +54,7 @@ export default {
     this.color.hex = this.doc.themeColor;
     const meta = frappe.getMeta('SalesInvoiceSettings');
     this.fields = meta.fields.filter(
-      field => field.fieldname !== 'numberSeries'
+      (field) => field.fieldname !== 'numberSeries'
     );
   },
   methods: {
@@ -67,16 +78,16 @@ export default {
         this.$emit('updateTemplateView');
       });
       this.$formModal.open(settings);
-    }
+    },
   },
   watch: {
-    color: async function() {
+    color: async function () {
       if (this.doc) {
         if (this.doc.themeColor != this.color.hex) {
           this.$emit('changeColor', this.color.hex);
         }
       }
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/components/Popover.vue b/src/components/Popover.vue
index f6c43f02..985af24b 100644
--- a/src/components/Popover.vue
+++ b/src/components/Popover.vue
@@ -24,6 +24,7 @@ import { createPopper } from '@popperjs/core';
 
 export default {
   name: 'Popover',
+  emits: ['open', 'close'],
   props: {
     hideArrow: {
       type: Boolean,
@@ -55,7 +56,7 @@ export default {
     };
   },
   mounted() {
-    let listener = (e) => {
+    this.listener = (e) => {
       let $els = [this.$refs.reference, this.$refs.popover];
       let insideClick = $els.some(
         ($el) => $el && (e.target === $el || $el.contains(e.target))
@@ -65,15 +66,17 @@ export default {
       }
       this.close();
     };
+
     if (this.show == null) {
-      document.addEventListener('click', listener);
-      this.$once('hook:beforeDestroy', () => {
-        document.removeEventListener('click', listener);
-      });
+      document.addEventListener('click', this.listener);
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.popper && this.popper.destroy();
+    if (this.listener) {
+      document.removeEventListener('click', this.listener);
+      delete this.listener;
+    }
   },
   methods: {
     setupPopper() {
diff --git a/src/components/Row.vue b/src/components/Row.vue
index ed18ab2c..e23db465 100644
--- a/src/components/Row.vue
+++ b/src/components/Row.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-grid border-b" :style="style" v-on="$listeners">
+  <div class="inline-grid border-b" :style="style" v-bind="$attrs">
     <slot></slot>
   </div>
 </template>
@@ -9,21 +9,21 @@ export default {
   props: {
     columnWidth: {
       type: String,
-      default: '1fr'
+      default: '1fr',
     },
     columnCount: {
       type: Number,
-      default: 0
+      default: 0,
     },
     ratio: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     gridTemplateColumns: {
       type: String,
-      default: null
+      default: null,
     },
-    gap: String
+    gap: String,
   },
   computed: {
     style() {
@@ -33,7 +33,9 @@ export default {
         obj['grid-template-columns'] = `repeat(${this.columnCount}, ${this.columnWidth})`;
       }
       if (this.ratio.length) {
-        obj['grid-template-columns'] = this.ratio.map(r => `${r}fr`).join(' ');
+        obj['grid-template-columns'] = this.ratio
+          .map((r) => `${r}fr`)
+          .join(' ');
       }
       if (this.gridTemplateColumns) {
         obj['grid-template-columns'] = this.gridTemplateColumns;
@@ -43,7 +45,7 @@ export default {
       }
 
       return obj;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 7b8f82cc..dc28540a 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -6,7 +6,7 @@
           toggleDropdown,
           highlightItemUp,
           highlightItemDown,
-          selectHighlightedItem
+          selectHighlightedItem,
         }"
       >
         <div
@@ -22,9 +22,13 @@
             autocomplete="off"
             spellcheck="false"
             v-model="inputValue"
-            @input="search"
+            @input="
+              () => {
+                search();
+                toggleDropdown(true);
+              }
+            "
             ref="input"
-            @focus="$toggleDropdown = toggleDropdown"
             @keydown.up="highlightItemUp"
             @keydown.down="highlightItemDown"
             @keydown.enter="selectHighlightedItem"
@@ -40,7 +44,7 @@
 import frappe from 'frappe';
 import reports from '../../reports/view';
 import Dropdown from '@/components/Dropdown';
-import { routeTo } from '@/utils'
+import { routeTo } from '@/utils';
 
 export default {
   data() {
@@ -48,20 +52,18 @@ export default {
       inputValue: '',
       searchList: [],
       suggestions: [],
-      $toggleDropdown: null
     };
   },
   components: {
-    Dropdown
+    Dropdown,
   },
+  emits: ['change'],
   mounted() {
     this.makeSearchList();
   },
   methods: {
     async search() {
-      this.$toggleDropdown && this.$toggleDropdown(true);
-
-      this.suggestions = this.searchList.filter(d => {
+      this.suggestions = this.searchList.filter((d) => {
         let key = this.inputValue.toLowerCase();
         return d.label.toLowerCase().includes(key);
       });
@@ -80,7 +82,7 @@ export default {
       const views = this.getViews();
 
       let searchList = [...doctypes, ...reports, ...views];
-      this.searchList = searchList.map(d => {
+      this.searchList = searchList.map((d) => {
         if (d.route) {
           d.action = () => routeTo(d.route);
           this.inputValue = '';
@@ -90,37 +92,44 @@ export default {
     },
     getDoctypes() {
       let doctypes = Object.keys(frappe.models).sort();
-      let doctypeMetas = doctypes.map(doctype => frappe.getMeta(doctype));
-      let searchableDoctypes = doctypeMetas.filter(meta => {
+      let doctypeMetas = doctypes.map((doctype) => frappe.getMeta(doctype));
+      let searchableDoctypes = doctypeMetas.filter((meta) => {
         return !meta.isSingle && !meta.isChild;
       });
-      return searchableDoctypes.map(meta => {
+      return searchableDoctypes.map((meta) => {
         return {
           label: meta.label || meta.name,
           route: `/list/${meta.name}`,
-          group: 'List'
+          group: 'List',
         };
       });
     },
     getReports() {
-      return Object.values(reports).map(report => {
+      return Object.values(reports).map((report) => {
         return {
           label: report.title,
           route: `/report/${report.method}`,
-          group: 'Reports'
+          group: 'Reports',
         };
       });
-
     },
     getViews() {
       return [
         {
           label: 'Chart of Accounts',
           route: '/chartOfAccounts',
-          group: 'List'
-        }
+          group: 'List',
+        },
       ];
-    }
-  }
+    },
+  },
 };
 </script>
+<style scoped>
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  display: none;
+}
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index a06d72ef..1572783d 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -48,9 +48,10 @@
             :class="isActiveGroup(group) && !group.items ? 'bg-white' : ''"
             @click="onGroupClick(group)"
           >
-            <component
-              :is="group.icon"
-              class="w-5 h-5"
+            <Icon
+              :name="group.icon"
+              :size="group.iconSize || '18'"
+              :height="group.iconHeight"
               :active="isActiveGroup(group)"
             />
             <div
@@ -102,9 +103,11 @@ import WindowControls from './WindowControls';
 import { routeTo } from '@/utils';
 import path from 'path';
 import router from '../router';
+import Icon from './Icon.vue';
 
 export default {
   components: [Button],
+  emits: ['change-db-file'],
   data() {
     return {
       companyName: '',
@@ -123,6 +126,7 @@ export default {
   },
   components: {
     WindowControls,
+    Icon,
   },
   async mounted() {
     this.companyName = await sidebarConfig.getTitle();
@@ -168,7 +172,7 @@ export default {
     routeTo,
     reportIssue,
     setActiveGroup() {
-      const { fullPath } = this.$router.currentRoute;
+      const { fullPath } = this.$router.currentRoute.value;
       const fallBackGroup = this.activeGroup;
       this.activeGroup = this.groups.find((g) => {
         if (fullPath.startsWith(g.route) && g.route !== '/') {
diff --git a/src/components/Toast.vue b/src/components/Toast.vue
index 211faaf6..2cf9c0bb 100644
--- a/src/components/Toast.vue
+++ b/src/components/Toast.vue
@@ -17,7 +17,7 @@
     :style="{ opacity }"
     v-if="show"
   >
-    <feather-icon :name="iconName" class="w-6 h-6 mr-3" :class="iconColor" />
+    <FeatherIcon :name="iconName" class="w-6 h-6 mr-3" :class="iconColor" />
     <div @click="actionClicked" :class="actionText ? 'cursor-pointer' : ''">
       <p class="text-base">{{ message }}</p>
       <button
@@ -36,8 +36,12 @@
 </template>
 <script>
 import { getColorClass } from '../colors';
+import FeatherIcon from './FeatherIcon.vue';
 
 export default {
+  components: {
+    FeatherIcon,
+  },
   data() {
     return {
       opacity: 0,
@@ -77,10 +81,6 @@ export default {
     },
   },
   mounted() {
-    const mountTarget = document.createElement('div');
-    mountTarget.id = 'toast-target';
-    this.$el.parentElement.append(mountTarget);
-
     setTimeout(() => {
       this.opacity = 1;
     }, 50);
diff --git a/src/components/TwoColumnForm.vue b/src/components/TwoColumnForm.vue
index b9a4e5cb..8972c079 100644
--- a/src/components/TwoColumnForm.vue
+++ b/src/components/TwoColumnForm.vue
@@ -12,37 +12,32 @@
         @change="(value) => onChange(df, value)"
       />
       <template v-else>
-        <template v-if="inlineEditField === df && inlineEditDoc">
-          <div class="border-b" :key="df.fieldname">
-            <TwoColumnForm
-              ref="inlineEditForm"
-              :doc="inlineEditDoc"
-              :fields="inlineEditFields"
-              :column-ratio="columnRatio"
-              :no-border="true"
-              :focus-first-input="true"
-              :autosave="false"
-              @error="(msg) => $emit('error', msg)"
-            />
-            <div class="flex px-4 pb-2">
-              <Button
-                class="w-1/2 text-gray-900"
-                @click="inlineEditField = null"
-              >
-                {{ t('Cancel') }}
-              </Button>
-              <Button
-                type="primary"
-                class="ml-2 w-1/2 text-white"
-                @click="() => saveInlineEditDoc(df)"
-              >
-                {{ df.inlineSaveText || t('Save') }}
-              </Button>
-            </div>
+        <div class="border-b" :key="df.fieldname" v-if="renderInline(df)">
+          <TwoColumnForm
+            ref="inlineEditForm"
+            :doc="inlineEditDoc"
+            :fields="inlineEditFields"
+            :column-ratio="columnRatio"
+            :no-border="true"
+            :focus-first-input="true"
+            :autosave="false"
+            @error="(msg) => $emit('error', msg)"
+          />
+          <div class="flex px-4 pb-2">
+            <Button class="w-1/2 text-gray-900" @click="inlineEditField = null">
+              {{ t('Cancel') }}
+            </Button>
+            <Button
+              type="primary"
+              class="ml-2 w-1/2 text-white"
+              @click="() => saveInlineEditDoc(df)"
+            >
+              {{ df.inlineSaveText || t('Save') }}
+            </Button>
           </div>
-        </template>
+        </div>
         <div
-          :key="df.fieldname"
+          :key="df.fieldname + '-else'"
           v-else
           class="grid"
           :class="{ 'border-b': !noBorder }"
@@ -98,6 +93,7 @@ import { handleErrorWithDialog, getErrorMessage } from '../errorHandling';
 
 let TwoColumnForm = {
   name: 'TwoColumnForm',
+  emits: ['error', 'change'],
   props: {
     doc: Object,
     fields: Array,
@@ -140,6 +136,11 @@ let TwoColumnForm = {
     }
   },
   methods: {
+    renderInline(df) {
+      return (
+        this.inlineEditField?.fieldname === df?.fieldname && this.inlineEditDoc
+      );
+    },
     evaluateBoolean(fieldProp, defaultValue) {
       const type = typeof fieldProp;
       switch (type) {
@@ -167,7 +168,7 @@ let TwoColumnForm = {
 
       let oldValue = this.doc.get(df.fieldname);
 
-      this.$set(this.errors, df.fieldname, null);
+      this.errors[df.fieldname] = null;
       if (oldValue === value) {
         return;
       }
@@ -186,7 +187,7 @@ let TwoColumnForm = {
     onChangeCommon(df, value) {
       this.doc.set(df.fieldname, value).catch((e) => {
         // set error message for this field
-        this.$set(this.errors, df.fieldname, getErrorMessage(e, this.doc));
+        this.errors[df.fieldname] = getErrorMessage(e, this.doc);
       });
 
       if (this.autosave && this.doc._dirty && !this.doc.isNew()) {
diff --git a/src/components/WindowControls.vue b/src/components/WindowControls.vue
index 087bf43f..5d3fcbc8 100644
--- a/src/components/WindowControls.vue
+++ b/src/components/WindowControls.vue
@@ -20,10 +20,10 @@
 
 <script>
 import { runWindowAction } from '@/utils';
-import { ipcRenderer } from 'electron';
 
 export default {
   name: 'WindowControls',
+  emits: ['close', 'minimize', 'maximize', 'unmaximize'],
   props: {
     buttons: {
       type: Array,
diff --git a/src/components/WindowsTitleBar.vue b/src/components/WindowsTitleBar.vue
index 3f054115..7b4fa384 100644
--- a/src/components/WindowsTitleBar.vue
+++ b/src/components/WindowsTitleBar.vue
@@ -36,6 +36,7 @@ import { IPC_MESSAGES } from '@/messages';
 
 export default {
   name: 'WindowsTitleBar',
+  emits: ['close', 'minimize', 'maximize', 'unmaximize'],
   methods: {
     async action(name) {
       const actionRan = await runWindowAction(name);
diff --git a/src/components/WithScroll.vue b/src/components/WithScroll.vue
index 698e71ea..bb4dade1 100644
--- a/src/components/WithScroll.vue
+++ b/src/components/WithScroll.vue
@@ -1,18 +1,42 @@
+<template>
+  <div class="scroll-container">
+    <slot></slot>
+  </div>
+</template>
 <script>
 export default {
   name: 'WithScroll',
+  emits: ['scroll'],
   mounted() {
-    let handler = () => {
+    this.listener = () => {
       let { scrollLeft, scrollTop } = this.$el;
       this.$emit('scroll', { scrollLeft, scrollTop });
     };
-    this.$el.addEventListener('scroll', handler);
-    this.$once('hook:beforeDestroy', () => {
-      this.$el.removeEventListener('scroll', handler);
-    });
+    this.$el.addEventListener('scroll', this.listener);
+  },
+  beforeUnmount() {
+    if (this.listener) {
+      this.$el.removeEventListener('scroll', this.listener);
+      delete this.listener;
+    }
   },
-  render() {
-    return this.$slots.default[0];
-  }
 };
 </script>
+<style>
+.scroll-container {
+  height: calc(100vh - 12rem);
+}
+.scroll-container::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.scroll-container::-webkit-scrollbar-thumb {
+  background-color: theme('colors.gray.200');
+}
+.scroll-container::-webkit-scrollbar-thumb:hover {
+  background-color: theme('colors.gray.300');
+}
+.scroll-container::-webkit-scrollbar-track {
+  background-color: white;
+}
+</style>
diff --git a/src/index.html b/src/index.html
index 289c744f..f4c834cb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,6 +12,5 @@
     <% } %>
 </head>
 <body>
-    <div id="app"></div>
 </body>
 </html>
diff --git a/src/main.js b/src/main.js
index 5a5655b5..e9da80ce 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,6 @@
 import { ipcRenderer } from 'electron';
 import frappe from 'frappe';
-import Vue from 'vue';
+import { createApp } from 'vue';
 import models from '../models';
 import App from './App';
 import FeatherIcon from './components/FeatherIcon';
@@ -26,12 +26,29 @@ import { showToast, stringifyCircular } from './utils';
   window.frappe = frappe;
   window.frappe.store = {};
 
+  window.onerror = (message, source, lineno, colno, error) => {
+    error = error ?? new Error('triggered in window.onerror');
+    handleError(true, error, { message, source, lineno, colno });
+  };
+
+  process.on('unhandledRejection', (error) => {
+    handleError(true, error);
+  });
+
+  process.on('uncaughtException', (error) => {
+    handleError(true, error, () => process.exit(1));
+  });
+
   registerIpcRendererListeners();
 
-  Vue.config.productionTip = false;
-  Vue.component('feather-icon', FeatherIcon);
-  Vue.directive('on-outside-click', outsideClickDirective);
-  Vue.mixin({
+  const app = createApp({
+    template: '<App/>',
+  });
+  app.use(router);
+  app.component('App', App);
+  app.component('feather-icon', FeatherIcon);
+  app.directive('on-outside-click', outsideClickDirective);
+  app.mixin({
     computed: {
       frappe() {
         return frappe;
@@ -50,7 +67,7 @@ import { showToast, stringifyCircular } from './utils';
     },
   });
 
-  Vue.config.errorHandler = (err, vm, info) => {
+  app.config.errorHandler = (err, vm, info) => {
     const more = {
       info,
     };
@@ -67,28 +84,7 @@ import { showToast, stringifyCircular } from './utils';
     console.error(err, vm, info);
   };
 
-  window.onerror = (message, source, lineno, colno, error) => {
-    error = error ?? new Error('triggered in window.onerror');
-    handleError(true, error, { message, source, lineno, colno });
-  };
-
-  process.on('unhandledRejection', (error) => {
-    handleError(true, error);
-  });
-
-  process.on('uncaughtException', (error) => {
-    handleError(true, error, () => process.exit(1));
-  });
-
-  /* eslint-disable no-new */
-  new Vue({
-    el: '#app',
-    router,
-    components: {
-      App,
-    },
-    template: '<App/>',
-  });
+  app.mount('body');
 })();
 
 function registerIpcRendererListeners() {
diff --git a/src/pages/ChartOfAccounts.vue b/src/pages/ChartOfAccounts.vue
index b4b9bf6e..dfc5aa35 100644
--- a/src/pages/ChartOfAccounts.vue
+++ b/src/pages/ChartOfAccounts.vue
@@ -1,16 +1,18 @@
 <template>
   <div class="flex flex-col overflow-y-hidden">
     <PageHeader>
-      <h1 slot="title" class="text-2xl font-bold">
-        {{ t('Chart of Accounts') }}
-      </h1>
-      <template slot="actions">
+      <template #title>
+        <h1 class="text-2xl font-bold">
+          {{ t('Chart of Accounts') }}
+        </h1>
+      </template>
+      <template #actions>
         <SearchBar class="ml-2" />
       </template>
     </PageHeader>
     <div class="flex-1 flex px-8 overflow-y-auto">
       <div class="flex-1" v-if="root">
-        <template v-for="account in allAccounts">
+        <div v-for="account in allAccounts" :key="account.name">
           <div
             class="
               mt-2
@@ -25,7 +27,6 @@
               account.level !== 0 ? 'text-base' : 'text-lg',
               isQuickEditOpen(account) ? 'bg-gray-200' : '',
             ]"
-            :key="account.name"
             @click="onClick(account)"
           >
             <div class="flex items-center" :class="`pl-${account.level * 8}`">
@@ -47,7 +48,7 @@
                       hover:text-gray-900
                       focus:outline-none
                     "
-                    @click.stop="addAccount(account, 'addingAccount')"
+                    @click="addAccount(account, 'addingAccount')"
                   >
                     {{ t('Add Account') }}
                   </button>
@@ -58,7 +59,7 @@
                       hover:text-gray-900
                       focus:outline-none
                     "
-                    @click.stop="addAccount(account, 'addingGroupAccount')"
+                    @click="addAccount(account, 'addingGroupAccount')"
                   >
                     {{ t('Add Group') }}
                   </button>
@@ -122,7 +123,7 @@
               </div>
             </div>
           </div>
-        </template>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/pages/Dashboard/Dashboard.vue b/src/pages/Dashboard/Dashboard.vue
index 2c15d51f..b1a47872 100644
--- a/src/pages/Dashboard/Dashboard.vue
+++ b/src/pages/Dashboard/Dashboard.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="flex flex-col">
     <PageHeader>
-      <h1 slot="title" class="text-2xl font-bold">{{ t('Dashboard') }}</h1>
-      <template slot="actions">
+      <template #title>
+        <h1 class="text-2xl font-bold">{{ t('Dashboard') }}</h1>
+      </template>
+      <template #actions>
         <SearchBar class="ml-2" />
       </template>
     </PageHeader>
diff --git a/src/pages/Dashboard/Expenses.vue b/src/pages/Dashboard/Expenses.vue
index 79fd25e5..e849992f 100644
--- a/src/pages/Dashboard/Expenses.vue
+++ b/src/pages/Dashboard/Expenses.vue
@@ -1,12 +1,10 @@
 <template>
   <div class="flex flex-col h-full">
     <SectionHeader>
-      <template slot="title">{{ t('Top Expenses') }}</template>
-      <PeriodSelector
-        slot="action"
-        :value="period"
-        @change="(value) => (period = value)"
-      />
+      <template #title>{{ t('Top Expenses') }}</template>
+      <template #action>
+        <PeriodSelector :value="period" @change="(value) => (period = value)" />
+      </template>
     </SectionHeader>
     <div class="flex relative" v-show="hasData">
       <div class="w-1/2">
@@ -38,7 +36,10 @@
         @change="(value) => (active = value)"
       />
     </div>
-    <div v-if="expenses.length === 0" class="flex-1 w-full h-full flex-center my-20">
+    <div
+      v-if="expenses.length === 0"
+      class="flex-1 w-full h-full flex-center my-20"
+    >
       <span class="text-base text-gray-600">
         {{ t('No expenses in this period') }}
       </span>
diff --git a/src/pages/Dashboard/PeriodSelector.vue b/src/pages/Dashboard/PeriodSelector.vue
index 6cd8dd9b..38cecd6c 100644
--- a/src/pages/Dashboard/PeriodSelector.vue
+++ b/src/pages/Dashboard/PeriodSelector.vue
@@ -46,7 +46,7 @@ export default {
       default: () => ['This Year', 'This Quarter', 'This Month'],
     },
   },
-
+  emits: ['change'],
   components: {
     Dropdown,
   },
diff --git a/src/pages/Dashboard/ProfitAndLoss.vue b/src/pages/Dashboard/ProfitAndLoss.vue
index 14080baf..0d25b994 100644
--- a/src/pages/Dashboard/ProfitAndLoss.vue
+++ b/src/pages/Dashboard/ProfitAndLoss.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="flex flex-col h-full">
     <SectionHeader>
-      <template slot="title">{{ t('Profit and Loss') }}</template>
-      <PeriodSelector
-        slot="action"
-        :value="period"
-        :options="['This Year', 'This Quarter']"
-        @change="(value) => (period = value)"
-      />
+      <template #title>{{ t('Profit and Loss') }}</template>
+      <template #action>
+        <PeriodSelector
+          :value="period"
+          :options="['This Year', 'This Quarter']"
+          @change="(value) => (period = value)"
+        />
+      </template>
     </SectionHeader>
     <BarChart
       v-if="hasData"
diff --git a/src/pages/Dashboard/UnpaidInvoices.vue b/src/pages/Dashboard/UnpaidInvoices.vue
index 4f1ac918..dfe7203b 100644
--- a/src/pages/Dashboard/UnpaidInvoices.vue
+++ b/src/pages/Dashboard/UnpaidInvoices.vue
@@ -1,27 +1,27 @@
 <template>
   <div class="flex justify-between gap-10">
     <div
-      class="w-1/2  flex flex-col justify-between"
+      class="w-1/2 flex flex-col justify-between"
       v-for="invoice in invoices"
       :key="invoice.title"
     >
       <SectionHeader>
-        <template slot="title">{{ invoice.title }}</template>
-        <PeriodSelector
-          v-if="invoice.hasData"
-          slot="action"
-          :value="$data[invoice.periodKey]"
-          @change="(value) => ($data[invoice.periodKey] = value)"
-        />
-        <Button
-          v-else
-          slot="action"
-          :icon="true"
-          type="primary"
-          @click="newInvoice(invoice)"
-        >
-          <feather-icon name="plus" class="w-4 h-4 text-white" />
-        </Button>
+        <template #title>{{ invoice.title }}</template>
+        <template #action>
+          <PeriodSelector
+            v-if="invoice.hasData"
+            :value="$data[invoice.periodKey]"
+            @change="(value) => ($data[invoice.periodKey] = value)"
+          />
+          <Button
+            v-else
+            :icon="true"
+            type="primary"
+            @click="newInvoice(invoice)"
+          >
+            <feather-icon name="plus" class="w-4 h-4 text-white" />
+          </Button>
+        </template>
       </SectionHeader>
       <div>
         <div class="mt-6 flex justify-between">
diff --git a/src/pages/DatabaseSelector.vue b/src/pages/DatabaseSelector.vue
index 0f083c3d..0e23acd9 100644
--- a/src/pages/DatabaseSelector.vue
+++ b/src/pages/DatabaseSelector.vue
@@ -163,6 +163,7 @@ import { showErrorDialog } from '../errorHandling';
 
 export default {
   name: 'DatabaseSelector',
+  emits: ['database-connect'],
   data() {
     return {
       loadingDatabase: false,
diff --git a/src/pages/Desk.vue b/src/pages/Desk.vue
index bc246d73..0a777594 100644
--- a/src/pages/Desk.vue
+++ b/src/pages/Desk.vue
@@ -1,26 +1,31 @@
 <template>
   <div class="flex overflow-hidden">
     <Sidebar
-      class="w-44 flex-shrink-0"
+      class="w-48 flex-shrink-0"
       @change-db-file="$emit('change-db-file')"
     />
     <div class="flex flex-1 overflow-y-hidden bg-white">
-      <keep-alive>
-        <router-view class="flex-1" :key="$route.path" />
-      </keep-alive>
-      <div class="flex" v-if="showQuickEdit">
+      <router-view v-slot="{ Component }">
         <keep-alive>
-          <router-view
-            name="edit"
-            class="w-80 flex-1"
-            :key="$route.query.doctype + $route.query.name"
-          />
+          <component :is="Component" class="flex-1" :key="$route.path" />
         </keep-alive>
+      </router-view>
+
+      <div class="flex" v-if="showQuickEdit">
+        <router-view name="edit" v-slot="{ Component }">
+          <keep-alive>
+            <component
+              :is="Component"
+              class="w-80 flex-1"
+              :key="$route.query.doctype + $route.query.name"
+            />
+          </keep-alive>
+        </router-view>
       </div>
       <div
         id="toast-container"
         class="absolute bottom-0 flex flex-col items-center mb-3"
-        style="width: calc(100% - 11rem)"
+        style="width: calc(100% - 12rem)"
       >
         <div id="toast-target" />
       </div>
@@ -31,6 +36,7 @@
 import Sidebar from '../components/Sidebar';
 export default {
   name: 'Desk',
+  emits: ['change-db-file'],
   components: {
     Sidebar,
   },
diff --git a/src/pages/GetStarted.vue b/src/pages/GetStarted.vue
index a33af28c..71d33b68 100644
--- a/src/pages/GetStarted.vue
+++ b/src/pages/GetStarted.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="flex flex-col overflow-y-hidden">
     <PageHeader>
-      <h1 slot="title" class="text-2xl font-bold">
-        {{ t('Setup your workspace') }}
-      </h1>
+      <template #title>
+        <h1 class="text-2xl font-bold">
+          {{ t('Setup your workspace') }}
+        </h1>
+      </template>
     </PageHeader>
     <div class="px-8">
       <div class="border-t"></div>
@@ -91,6 +93,7 @@ import { openSettings } from '@/utils';
 import { ipcRenderer } from 'electron';
 import { IPC_MESSAGES } from '@/messages';
 import { routeTo } from '@/utils';
+import { h } from 'vue';
 
 export default {
   name: 'GetStarted',
@@ -391,9 +394,9 @@ export default {
       let size = completed ? '24' : '18';
       return {
         name,
-        render(h) {
+        render() {
           return h(Icon, {
-            props: Object.assign(
+            ...Object.assign(
               {
                 name,
                 size,
diff --git a/src/pages/InvoiceForm.vue b/src/pages/InvoiceForm.vue
index 1965d527..8550ac9c 100644
--- a/src/pages/InvoiceForm.vue
+++ b/src/pages/InvoiceForm.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="flex flex-col" v-if="doc">
     <PageHeader>
-      <BackLink slot="title" />
-      <template slot="actions">
+      <template #title>
+        <BackLink />
+      </template>
+      <template #actions>
         <StatusBadge :status="status" />
         <Button
           v-if="doc.submitted"
@@ -269,7 +271,7 @@ export default {
 
     let query = this.$route.query;
     if (query.values && query.doctype === this.doctype) {
-      this.doc.set(this.$router.currentRoute.query.values);
+      this.doc.set(this.$router.currentRoute.value.query.values);
     }
     this.status = getInvoiceStatus(this.doc);
   },
diff --git a/src/pages/JournalEntryForm.vue b/src/pages/JournalEntryForm.vue
index d87731e5..3f06e821 100644
--- a/src/pages/JournalEntryForm.vue
+++ b/src/pages/JournalEntryForm.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="flex flex-col">
     <PageHeader>
-      <BackLink slot="title" />
-      <template slot="actions" v-if="doc">
+      <template #title>
+        <BackLink />
+      </template>
+      <template #actions v-if="doc">
         <StatusBadge :status="status" />
         <DropdownWithActions class="ml-2" :actions="actions" />
         <Button
@@ -123,11 +125,7 @@ import DropdownWithActions from '@/components/DropdownWithActions';
 import FormControl from '@/components/Controls/FormControl';
 import BackLink from '@/components/BackLink';
 import StatusBadge from '@/components/StatusBadge';
-import {
-  showMessageDialog,
-  getActionsForDocument,
-  routeTo,
-} from '@/utils';
+import { showMessageDialog, getActionsForDocument, routeTo } from '@/utils';
 import { handleErrorWithDialog } from '../errorHandling';
 
 export default {
diff --git a/src/pages/ListView/List.vue b/src/pages/ListView/List.vue
index ff6f79e5..f3a433de 100644
--- a/src/pages/ListView/List.vue
+++ b/src/pages/ListView/List.vue
@@ -31,14 +31,14 @@
         <Row
           gap="1rem"
           class="cursor-pointer text-gray-900 flex-1"
-          @click.native="openForm(doc)"
+          @click="openForm(doc)"
           :columnCount="columns.length"
         >
           <ListCell
             v-for="column in columns"
             :key="column.label"
             :class="{
-              'text-right': ['Float', 'Currency'].includes(column.fieldtype)
+              'text-right': ['Float', 'Currency'].includes(column.fieldtype),
             }"
             :doc="doc"
             :column="column"
@@ -66,22 +66,23 @@ import Button from '@/components/Button';
 export default {
   name: 'List',
   props: ['listConfig', 'filters'],
+  emits: ['makeNewDoc'],
   components: {
     Row,
     ListCell,
     Avatar,
-    Button
+    Button,
   },
   watch: {
     listConfig(oldValue, newValue) {
       if (oldValue.doctype !== newValue.doctype) {
         this.setupColumnsAndData();
       }
-    }
+    },
   },
   data() {
     return {
-      data: []
+      data: [],
     };
   },
   computed: {
@@ -93,7 +94,7 @@ export default {
     },
     hasImage() {
       return this.meta.hasField('image');
-    }
+    },
   },
   async mounted() {
     await this.setupColumnsAndData();
@@ -113,7 +114,7 @@ export default {
       }
       openQuickEdit({
         doctype: this.doctype,
-        name: doc.name
+        name: doc.name,
       });
     },
     async updateData(filters) {
@@ -122,7 +123,7 @@ export default {
         doctype: this.doctype,
         fields: ['*'],
         filters,
-        orderBy: 'creation'
+        orderBy: 'creation',
       });
     },
     getFilters() {
@@ -133,7 +134,7 @@ export default {
     },
     prepareColumns() {
       return this.listConfig.columns
-        .map(col => {
+        .map((col) => {
           if (typeof col === 'string') {
             const field = this.meta.getField(col);
             if (!field) return null;
@@ -142,7 +143,7 @@ export default {
           return col;
         })
         .filter(Boolean);
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/pages/ListView/ListView.vue b/src/pages/ListView/ListView.vue
index 5ebb70da..f7ff098c 100644
--- a/src/pages/ListView/ListView.vue
+++ b/src/pages/ListView/ListView.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="flex flex-col">
     <PageHeader>
-      <h1 slot="title" class="text-2xl font-bold" v-if="title">{{ title }}</h1>
-      <template slot="actions">
+      <template #title>
+        <h1 class="text-2xl font-bold" v-if="title">
+          {{ title }}
+        </h1>
+      </template>
+      <template #actions>
         <FilterDropdown
           ref="filterDropdown"
           @change="applyFilter"
@@ -35,7 +39,7 @@ import List from './List';
 import listConfigs from './listConfig';
 // import Icon from '@/components/Icon';
 import FilterDropdown from '@/components/FilterDropdown';
-import { routeTo } from '@/utils'
+import { routeTo } from '@/utils';
 
 export default {
   name: 'ListView',
@@ -46,7 +50,7 @@ export default {
     Button,
     SearchBar,
     // Icon,
-    FilterDropdown
+    FilterDropdown,
   },
   activated() {
     if (typeof this.filters === 'object') {
@@ -83,10 +87,10 @@ export default {
         query: {
           edit: 1,
           doctype: this.doctype,
-          name
-        }
+          name,
+        },
       };
-    }
+    },
   },
   computed: {
     meta() {
@@ -99,13 +103,13 @@ export default {
         return {
           title: this.doctype,
           doctype: this.doctype,
-          columns: this.meta.getKeywordFields()
+          columns: this.meta.getKeywordFields(),
         };
       }
     },
     title() {
       return this.listConfig.title || this.doctype;
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/pages/PrintView/PrintView.vue b/src/pages/PrintView/PrintView.vue
index ec4ca5a4..eb7584f6 100644
--- a/src/pages/PrintView/PrintView.vue
+++ b/src/pages/PrintView/PrintView.vue
@@ -2,8 +2,10 @@
   <div class="flex">
     <div class="flex flex-col flex-1">
       <PageHeader class="bg-white z-10">
-        <BackLink slot="title" />
-        <template slot="actions">
+        <template #title>
+          <BackLink />
+        </template>
+        <template #actions>
           <Button
             class="text-gray-900 text-xs ml-2"
             @click="showCustomiser = !showCustomiser"
@@ -52,7 +54,6 @@
 import frappe from 'frappe';
 import PageHeader from '@/components/PageHeader';
 import SearchBar from '@/components/SearchBar';
-import DropdownWithAction from '@/components/DropdownWithAction';
 import Button from '@/components/Button';
 import BackLink from '@/components/BackLink';
 import TwoColumnForm from '@/components/TwoColumnForm';
@@ -66,7 +67,6 @@ export default {
   components: {
     PageHeader,
     SearchBar,
-    DropdownWithAction,
     Button,
     BackLink,
     TwoColumnForm,
diff --git a/src/pages/QuickEditForm.vue b/src/pages/QuickEditForm.vue
index ee28d6ec..fd3f75eb 100644
--- a/src/pages/QuickEditForm.vue
+++ b/src/pages/QuickEditForm.vue
@@ -88,7 +88,7 @@ import { openQuickEdit, getActionsForDocument } from '@/utils';
 
 export default {
   name: 'QuickEditForm',
-  props: ['doctype', 'name', 'values', 'hideFields', 'showFields'],
+  props: ['doctype', 'name', 'valueJSON', 'hideFields', 'showFields'],
   components: {
     Button,
     FormControl,
@@ -106,9 +106,17 @@ export default {
       },
     };
   },
+  mounted() {
+    if (!this.valueJSON) {
+      return;
+    }
+
+    this.values = JSON.parse(this.valueJSON);
+  },
   data() {
     return {
       doc: null,
+      values: null,
       titleField: null,
       imageField: null,
       statusText: null,
diff --git a/src/pages/Report.vue b/src/pages/Report.vue
index e0522dc6..d49b5de0 100644
--- a/src/pages/Report.vue
+++ b/src/pages/Report.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="flex flex-col max-w-full">
     <PageHeader>
-      <h1 slot="title" class="text-2xl font-bold">{{ report.title }}</h1>
-      <template slot="actions">
+      <template #title>
+        <h1 class="text-2xl font-bold">{{ report.title }}</h1>
+      </template>
+      <template #actions>
         <DropdownWithActions
           v-for="group of actionGroups"
-          @click="group.action(reportData, filters)"
           :key="group.label"
           :type="group.type"
           :actions="group.actions"
@@ -58,37 +59,39 @@
             </div>
           </Row>
         </div>
-        <WithScroll @scroll="onBodyScroll">
-          <div class="flex-1 overflow-auto report-scroll-container">
-            <Row
-              v-show="row.isShown"
-              v-for="(row, i) in rows"
-              :key="i"
-              gap="2rem"
-              :grid-template-columns="gridTemplateColumns"
+        <WithScroll
+          @scroll="onBodyScroll"
+          class="flex-1 overflow-auto"
+          style="height: calc(100vh - 12rem)"
+        >
+          <Row
+            v-show="row.isShown"
+            v-for="(row, i) in rows"
+            :key="i"
+            gap="2rem"
+            :grid-template-columns="gridTemplateColumns"
+          >
+            <div
+              class="py-4 text-base overflow-scroll no-scrollbar"
+              :class="getCellClasses(row, column)"
+              v-for="column in columns"
+              :key="column.label"
+              @click="toggleChildren(row, i)"
             >
-              <div
-                class="py-4 text-base overflow-scroll no-scrollbar"
-                :class="getCellClasses(row, column)"
-                v-for="column in columns"
-                :key="column.label"
-                @click="toggleChildren(row, i)"
-              >
-                <div class="inline-flex">
-                  <feather-icon
-                    v-if="row.isBranch && !row.isLeaf && column === columns[0]"
-                    class="flex-shrink-0 w-4 h-4 mr-2"
-                    :name="row.expanded ? 'chevron-down' : 'chevron-right'"
+              <div class="inline-flex">
+                <feather-icon
+                  v-if="row.isBranch && !row.isLeaf && column === columns[0]"
+                  class="flex-shrink-0 w-4 h-4 mr-2"
+                  :name="row.expanded ? 'chevron-down' : 'chevron-right'"
+                />
+                <span class="truncate" :class="{ 'bg-gray-100': loading }">
+                  <component
+                    :is="cellComponent(row[column.fieldname], column)"
                   />
-                  <span class="truncate" :class="{ 'bg-gray-100': loading }">
-                    <component
-                      :is="cellComponent(row[column.fieldname], column)"
-                    />
-                  </span>
-                </div>
+                </span>
               </div>
-            </Row>
-          </div>
+            </div>
+          </Row>
         </WithScroll>
       </div>
     </div>
@@ -104,6 +107,7 @@ import WithScroll from '@/components/WithScroll';
 import FormControl from '@/components/Controls/FormControl';
 import DropdownWithActions from '../components/DropdownWithActions.vue';
 import reportViewConfig from '@/../reports/view';
+import { h, markRaw } from 'vue';
 
 export default {
   name: 'Report',
@@ -161,13 +165,16 @@ export default {
         rows = data;
       }
 
-      this.reportData.columns = this.report.getColumns({ filters: this.filters, data });
+      this.reportData.columns = markRaw(this.report.getColumns({
+        filters: this.filters,
+        data,
+      }));
 
       if (!rows) {
         rows = [];
       }
 
-      this.reportData.rows = this.addTreeMeta(rows);
+      this.reportData.rows = markRaw(this.addTreeMeta(rows));
       this.loading = false;
     },
 
@@ -250,7 +257,7 @@ export default {
           ? frappe.format(cellValue, column)
           : '';
       return {
-        render(h) {
+        render() {
           return h('span', formattedValue);
         },
       };
@@ -366,22 +373,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.report-scroll-container {
-  height: calc(100vh - 12rem);
-}
-.report-scroll-container::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.report-scroll-container::-webkit-scrollbar-thumb {
-  background-color: theme('colors.gray.200');
-}
-.report-scroll-container::-webkit-scrollbar-thumb:hover {
-  background-color: theme('colors.gray.300');
-}
-.report-scroll-container::-webkit-scrollbar-track {
-  background-color: white;
-}
-</style>
diff --git a/src/pages/Settings/Settings.vue b/src/pages/Settings/Settings.vue
index 01cd2fd0..e6f527f9 100644
--- a/src/pages/Settings/Settings.vue
+++ b/src/pages/Settings/Settings.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="flex flex-col overflow-hidden">
     <PageHeader>
-      <h1 slot="title" class="text-2xl font-bold">
-        {{ t('Settings') }}
-      </h1>
+      <template #title>
+        <h1 class="text-2xl font-bold">
+          {{ t('Settings') }}
+        </h1>
+      </template>
     </PageHeader>
     <div class="flex justify-center flex-1 mb-8 mt-2">
       <div
@@ -60,6 +62,7 @@ import PageHeader from '@/components/PageHeader';
 import StatusBadge from '@/components/StatusBadge';
 import { callInitializeMoneyMaker } from '../../utils';
 import { showToast } from '../../utils';
+import { h, markRaw } from 'vue';
 
 export default {
   name: 'Settings',
@@ -79,17 +82,17 @@ export default {
         {
           label: t('Invoice'),
           icon: 'invoice',
-          component: TabInvoice,
+          component: markRaw(TabInvoice),
         },
         {
           label: t('General'),
           icon: 'general',
-          component: TabGeneral,
+          component: markRaw(TabGeneral),
         },
         {
           label: t('System'),
           icon: 'system',
-          component: TabSystem,
+          component: markRaw(TabSystem),
         },
       ],
     };
@@ -138,10 +141,10 @@ export default {
     },
     getIconComponent(tab) {
       return {
-        render(h) {
+        render() {
           return h(Icon, {
             class: 'w-6 h-6',
-            props: Object.assign(
+            ...Object.assign(
               {
                 name: tab.icon,
                 size: '24',
diff --git a/src/pages/Settings/TabGeneral.vue b/src/pages/Settings/TabGeneral.vue
index 82a22a24..cc980d7c 100644
--- a/src/pages/Settings/TabGeneral.vue
+++ b/src/pages/Settings/TabGeneral.vue
@@ -17,6 +17,7 @@ import TwoColumnForm from '@/components/TwoColumnForm';
 
 export default {
   name: 'TabGeneral',
+  emits: ['change'],
   components: {
     TwoColumnForm,
   },
diff --git a/src/pages/Settings/TabInvoice.vue b/src/pages/Settings/TabInvoice.vue
index db3a3a8a..cb94e040 100644
--- a/src/pages/Settings/TabInvoice.vue
+++ b/src/pages/Settings/TabInvoice.vue
@@ -58,6 +58,7 @@ export default {
     TwoColumnForm,
     FormControl,
   },
+  emits: ['change'],
   provide() {
     return {
       doctype: 'PrintSettings',
diff --git a/src/pages/Settings/TabSystem.vue b/src/pages/Settings/TabSystem.vue
index 855208e2..07b28f33 100644
--- a/src/pages/Settings/TabSystem.vue
+++ b/src/pages/Settings/TabSystem.vue
@@ -29,6 +29,7 @@ export default {
   components: {
     TwoColumnForm,
   },
+  emits: ['change'],
   data() {
     return {
       doc: null,
diff --git a/src/pages/SetupWizard/SetupWizard.vue b/src/pages/SetupWizard/SetupWizard.vue
index 1bb09cb9..0dd6b349 100644
--- a/src/pages/SetupWizard/SetupWizard.vue
+++ b/src/pages/SetupWizard/SetupWizard.vue
@@ -29,7 +29,7 @@
             :autofocus="true"
           />
           <Popover placement="auto" :show-popup="Boolean(emailError)">
-            <template slot="target">
+            <template #target>
               <FormControl
                 :df="meta.getField('email')"
                 :value="doc.email"
@@ -41,7 +41,7 @@
                 "
               />
             </template>
-            <template slot="content">
+            <template #content>
               <div class="p-2 text-sm">
                 {{ emailError }}
               </div>
@@ -86,6 +86,7 @@ import {
 
 export default {
   name: 'SetupWizard',
+  emits: ['setup-complete', 'setup-canceled'],
   data() {
     return {
       doc: null,
diff --git a/src/router.js b/src/router.js
index 65a0e2b7..ace0cd23 100644
--- a/src/router.js
+++ b/src/router.js
@@ -10,12 +10,7 @@ import PrintView from '@/pages/PrintView/PrintView';
 import QuickEditForm from '@/pages/QuickEditForm';
 import Report from '@/pages/Report';
 import Settings from '@/pages/Settings/Settings';
-import Vue from 'vue';
-import Router from 'vue-router';
-
-
-
-Vue.use(Router);
+import { createRouter, createWebHistory } from 'vue-router';
 
 const routes = [
   {
@@ -107,7 +102,7 @@ const routes = [
   },
 ];
 
-let router = new Router({ routes });
+let router = createRouter({ routes, history: createWebHistory() });
 
 if (process.env.NODE_ENV === 'development') {
   window.router = router;
diff --git a/src/sidebarConfig.js b/src/sidebarConfig.js
index 64d3cf12..6962aa73 100644
--- a/src/sidebarConfig.js
+++ b/src/sidebarConfig.js
@@ -1,5 +1,4 @@
 import frappe, { t } from 'frappe';
-import Icon from './components/Icon';
 
 const config = {
   getTitle: async () => {
@@ -10,16 +9,18 @@ const config = {
     {
       title: t('Get Started'),
       route: '/get-started',
-      icon: getIcon('general', '24', '5'),
+      icon: 'general',
+      iconSize: '24',
+      iconHeight: '5',
     },
     {
       title: t('Dashboard'),
       route: '/',
-      icon: getIcon('dashboard'),
+      icon: 'dashboard',
     },
     {
       title: t('Sales'),
-      icon: getIcon('sales'),
+      icon: 'sales',
       route: '/list/SalesInvoice',
       items: [
         {
@@ -36,7 +37,7 @@ const config = {
     },
     {
       title: t('Purchases'),
-      icon: getIcon('purchase'),
+      icon: 'purchase',
       route: '/list/PurchaseInvoice',
       items: [
         {
@@ -53,7 +54,7 @@ const config = {
     },
     {
       title: t('Common'),
-      icon: getIcon('common-entries'),
+      icon: 'common-entries',
       route: '/list/Item',
       items: [
         {
@@ -75,7 +76,7 @@ const config = {
     },
     {
       title: t('Reports'),
-      icon: getIcon('reports'),
+      icon: 'reports',
       route: '/report/general-ledger',
       items: [
         {
@@ -108,7 +109,7 @@ const config = {
     },
     {
       title: t('Setup'),
-      icon: getIcon('settings'),
+      icon: 'settings',
       route: '/chart-of-accounts',
       items: [
         {
@@ -129,22 +130,4 @@ const config = {
   ],
 };
 
-function getIcon(name, size = '18', height = null) {
-  return {
-    name,
-    render(h) {
-      return h(Icon, {
-        props: Object.assign(
-          {
-            name,
-            size,
-            height,
-          },
-          this.$attrs
-        ),
-      });
-    },
-  };
-}
-
 export default config;
diff --git a/src/ui.js b/src/ui.js
index cfe4dc59..c1c6d5d3 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -8,7 +8,7 @@ function onDocumentClick(e, el, fn) {
 }
 
 export const outsideClickDirective = {
-  bind(el, binding) {
+  beforeMount(el, binding) {
     el.dataset.outsideClickIndex = instances.length;
 
     const fn = binding.value;
@@ -19,7 +19,7 @@ export const outsideClickDirective = {
     document.addEventListener('click', click);
     instances.push(click);
   },
-  unbind(el) {
+  unmounted(el) {
     const index = el.dataset.outsideClickIndex;
     const handler = instances[index];
     document.addEventListener('click', handler);
diff --git a/src/utils.js b/src/utils.js
index 2236757f..20313a50 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -5,7 +5,7 @@ import { ipcRenderer } from 'electron';
 import frappe, { t } from 'frappe';
 import { isPesa } from 'frappe/utils';
 import lodash from 'lodash';
-import Vue from 'vue';
+import { createApp, h } from 'vue';
 import { handleErrorWithDialog } from './errorHandling';
 import { IPC_ACTIONS, IPC_MESSAGES } from './messages';
 
@@ -147,7 +147,7 @@ export function openQuickEdit({
   showFields,
   defaults = {},
 }) {
-  let currentRoute = router.currentRoute;
+  let currentRoute = router.currentRoute.value;
   let query = currentRoute.query;
   let method = 'push';
   if (query.edit && query.doctype === doctype) {
@@ -163,7 +163,7 @@ export function openQuickEdit({
       name,
       showFields: showFields ?? getShowFields(doctype),
       hideFields,
-      values: defaults,
+      valueJSON: stringifyCircular(defaults),
       lastRoute: currentRoute,
     },
   });
@@ -271,7 +271,10 @@ export function getInvoiceStatus(doc) {
 
 export function routeTo(route) {
   let routeOptions = route;
-  if (typeof route === 'string' && route === router.currentRoute.fullPath) {
+  if (
+    typeof route === 'string' &&
+    route === router.currentRoute.value.fullPath
+  ) {
     return;
   }
 
@@ -332,13 +335,24 @@ export async function getSavePath(name, extention) {
   return { canceled, filePath };
 }
 
+function replaceAndAppendMount(app, replaceId) {
+  const fragment = document.createDocumentFragment();
+  const target = document.getElementById(replaceId);
+  const parent = target.parentElement;
+  const clone = target.cloneNode();
+
+  app.mount(fragment);
+  target.replaceWith(fragment);
+  parent.append(clone);
+}
+
 export function showToast(props) {
-  new Vue({
-    el: '#toast-target',
-    render(createElement) {
-      return createElement(Toast, { props });
+  const toast = createApp({
+    render() {
+      return h(Toast, { ...props });
     },
   });
+  replaceAndAppendMount(toast, 'toast-target');
 }
 
 export function titleCase(phrase) {
@@ -441,6 +455,8 @@ export function stringifyCircular(
   });
 }
 
+window.showToast = showToast;
+
 export function checkForUpdates(force = false) {
   ipcRenderer.invoke(IPC_ACTIONS.CHECK_FOR_UPDATES, force);
 }
diff --git a/yarn.lock b/yarn.lock
index 6ac58b8e..bb479899 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -293,6 +293,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.2.tgz#3723cd5c8d8773eef96ce57ea1d9b7faaccd12ac"
   integrity sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==
 
+"@babel/parser@^7.16.4":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.0.tgz#f0ac33eddbe214e4105363bb17c3341c5ffcc43c"
+  integrity sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.0":
   version "7.16.2"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.2.tgz#2977fca9b212db153c195674e57cfab807733183"
@@ -1789,6 +1794,48 @@
     semver "^7.3.4"
     strip-ansi "^6.0.0"
 
+"@vue/compiler-core@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.30.tgz#6c5b362490930e72de8d033270a145e3830ae5c4"
+  integrity sha512-64fq1KfcR+k3Vlw+IsBM2VhV5B+2IP3YxvKU8LWCDLrkmlXtbf2eMK6+0IwX5KP41D0f1gzryIiXR7P8cB9O5Q==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/shared" "3.2.30"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
+"@vue/compiler-dom@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.30.tgz#ed15e6243227baeaa445d04df804aee6e4926eab"
+  integrity sha512-t7arHz2SXLCXlF2fdGDFVbhENbGMez254Z5edUqb//6WXJU1lC7GvSkUE7i5x8WSjgfqt60i0V8zdmk16rvLdw==
+  dependencies:
+    "@vue/compiler-core" "3.2.30"
+    "@vue/shared" "3.2.30"
+
+"@vue/compiler-sfc@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.30.tgz#9d2e56adb859059551fc1204bc37503f168c4d0c"
+  integrity sha512-P/5YpILtcQY92z72gxhkyOUPHVskEzhSrvYi91Xcr+csOxaDaYU5OqOxCzZKcf3Og70Tat404vO1OHrwprN90A==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.30"
+    "@vue/compiler-dom" "3.2.30"
+    "@vue/compiler-ssr" "3.2.30"
+    "@vue/reactivity-transform" "3.2.30"
+    "@vue/shared" "3.2.30"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
+
+"@vue/compiler-ssr@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.30.tgz#fc2bc13a9cdfd70fcffab3f0bc7de141cd9c3411"
+  integrity sha512-OUh3MwAu/PsD7VN3UOdBbTkltkrUCNouSht47+CMRzpUR5+ta7+xyMAVHeq8wg4YZenWaJimbR5TL35Ka4Vk6g==
+  dependencies:
+    "@vue/compiler-dom" "3.2.30"
+    "@vue/shared" "3.2.30"
+
 "@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.1.2":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@@ -1805,6 +1852,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/devtools-api@^6.0.0-beta.18":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.2.tgz#92267911dd2772c5a7641d2889051c6193a7c6aa"
+  integrity sha512-1W8ylfudTFepNgpgY1Dp29iVPlseIy+0+4xXoMkxKmdnxWx8vm8dNgz4F83zML46hHb9aP382JURFfqLuJcWYQ==
+
 "@vue/eslint-config-typescript@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@vue/eslint-config-typescript/-/eslint-config-typescript-7.0.0.tgz#220c70c2edf7a253e739298525f4d401b8ef0038"
@@ -1817,6 +1869,54 @@
   resolved "https://registry.yarnpkg.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz#ceb924b4ecb3b9c43871c7a429a02f8423e621ab"
   integrity sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==
 
+"@vue/reactivity-transform@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.30.tgz#2006e9f4645777a481b78ae77fc486159afa8480"
+  integrity sha512-Le5XzCJyK3qTjoTnvQG/Ehu8fYjayauMNFyMaEnwFlm/avDofpuibpS9u+/6AgzsGnVWN+i0Jgf25bJd9DIwMw==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.30"
+    "@vue/shared" "3.2.30"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+
+"@vue/reactivity@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.30.tgz#fdae2bb66d075c34593ea7e15c6831300a1ad39e"
+  integrity sha512-qlNKbkRn2JiGxVUEdoXbLAy+vcuHUCcq+YH2uXWz0BNMvXY2plmz+oqsw+694llwmYLkke5lbdYF4DIupisIkg==
+  dependencies:
+    "@vue/shared" "3.2.30"
+
+"@vue/runtime-core@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.30.tgz#1acc119ff8a49c06af6b03611bc4e03f464ca8a2"
+  integrity sha512-RTi7xH0Ht/6wfbo2WFBMJTEiyWFTqGhrksJm8lz6E+auO6lXZ6Eq3gPNfLt47GDWCm4xyrv+rs5R4UbarPEQ1Q==
+  dependencies:
+    "@vue/reactivity" "3.2.30"
+    "@vue/shared" "3.2.30"
+
+"@vue/runtime-dom@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.30.tgz#16a85b359ea1fff9b1dd61e9d00e93f4652aba5e"
+  integrity sha512-a3+jrncDvEFQmB+v9k0VyT4/Y3XO6OAueCroXXY4yLyr6PJeyxljweV5TzvW0rvVzH9sZO0QAvG76Lo+6C92Qw==
+  dependencies:
+    "@vue/runtime-core" "3.2.30"
+    "@vue/shared" "3.2.30"
+    csstype "^2.6.8"
+
+"@vue/server-renderer@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.30.tgz#4acccad3933475d07b94560c6cb205363975b969"
+  integrity sha512-pzb8J/w+JdZVOtuKFlirGqrs4GP60FXGDJySw3WV2pCetuFstaacDrnymEeSo3ohAD+Qjv7zAG+Y7OvkdxQxmQ==
+  dependencies:
+    "@vue/compiler-ssr" "3.2.30"
+    "@vue/shared" "3.2.30"
+
+"@vue/shared@3.2.30":
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.30.tgz#e2ba8f6692399c27c81c668ecd3f1a4e13ee2f5e"
+  integrity sha512-B3HouBtUxcfu2w2d+VhdLcVBXKYYhXiFMAfQ+hoe8NUhKkPRkWDIqhpuehCZxVQ3S2dN1P1WfKGlxGC+pfmxGg==
+
 "@vue/web-component-wrapper@^1.2.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
@@ -4065,6 +4165,11 @@ csso@^4.0.2:
   dependencies:
     css-tree "^1.1.2"
 
+csstype@^2.6.8:
+  version "2.6.19"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
+  integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
+
 csvjson-csv2json@^5.0.6:
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/csvjson-csv2json/-/csvjson-csv2json-5.0.6.tgz#b056f77dd3c13a2f550ada1c31f05072aad6ff3a"
@@ -4981,6 +5086,11 @@ estraverse@^5.1.0, estraverse@^5.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -7402,6 +7512,13 @@ luxon@^2.0.2:
   resolved "https://registry.yarnpkg.com/luxon/-/luxon-2.0.2.tgz#11f2cd4a11655fdf92e076b5782d7ede5bcdd133"
   integrity sha512-ZRioYLCgRHrtTORaZX1mx+jtxKtKuI5ZDvHNAmqpUzGqSrR+tL4FVLn/CUGMA3h0+AKD1MAxGI5GnCqR5txNqg==
 
+magic-string@^0.25.7:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
 make-dir@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -7782,6 +7899,11 @@ nanoid@^3.1.22, nanoid@^3.1.30:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.32.tgz#8f96069e6239cc0a9ae8c0d3b41a3b4933a88c0a"
   integrity sha512-F8mf7R3iT9bvThBoW4tGXhXFHCctyCiUUPrWF8WaTqa3h96d9QybkSeba43XVOOE3oiLfkVDe4bT8MeGmkrTxw==
 
+nanoid@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
+  integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -8442,9 +8564,9 @@ performance-now@^2.1.0:
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
 pesa@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/pesa/-/pesa-1.1.3.tgz#cddd43b02a1db55cd6fb7b220257d33a268588a4"
-  integrity sha512-WcgR2zb5h8h+k9JQb+xkLsYkdMuoxqKgqWm5uTcbi3EGNg3r0tfzcvIBpRYLtZ6TtICbyCRZxWi0WXCh5jSw0A==
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/pesa/-/pesa-1.1.6.tgz#a123dc7a31c977bbfb6dbbee14a9913c8385cd0f"
+  integrity sha512-EDs4Tj8QX7hZITkKhfHeVT/9oQRqRPyF3pVet1FqGX94/zkcqreBYb94ojUVrzZmir26+IHaKyCpTB6eqC04uw==
 
 pg-connection-string@2.5.0:
   version "2.5.0"
@@ -8947,6 +9069,15 @@ postcss@^8:
     nanoid "^3.1.22"
     source-map "^0.6.1"
 
+postcss@^8.1.10:
+  version "8.4.6"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
+  integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
+  dependencies:
+    nanoid "^3.2.0"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^8.3.5:
   version "8.4.5"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
@@ -10069,6 +10200,11 @@ source-map-js@^1.0.1:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf"
   integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==
 
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
 source-map-resolve@^0.5.0:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -10116,6 +10252,11 @@ source-map@^0.7.3, source-map@~0.7.2:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+sourcemap-codec@^1.4.4:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
 spdx-correct@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
@@ -11338,10 +11479,12 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-router@^3.5.3:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.3.tgz#041048053e336829d05dafacf6a8fb669a2e7999"
-  integrity sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg==
+vue-router@^4.0.12:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.12.tgz#8dc792cddf5bb1abcc3908f9064136de7e13c460"
+  integrity sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.18"
 
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.3"
@@ -11364,10 +11507,16 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.6.14:
-  version "2.6.14"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
-  integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
+vue@^3.2.30:
+  version "3.2.30"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.30.tgz#47de3039631ac22cab2fd26b427575260199b8bb"
+  integrity sha512-ZmTFWVJUX2XADkuOB8GcLTuxnBLogjJBTNVrM7WsTnjqRQ+VR8bLNrvNsbn8vj/LaP5+0WFAPrpngOYE2x+e+Q==
+  dependencies:
+    "@vue/compiler-dom" "3.2.30"
+    "@vue/compiler-sfc" "3.2.30"
+    "@vue/runtime-dom" "3.2.30"
+    "@vue/server-renderer" "3.2.30"
+    "@vue/shared" "3.2.30"
 
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"