diff --git a/babel.config.js b/babel.config.js
index 691f4205..b3311370 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,7 +1,10 @@
 module.exports = {
   'presets': [
     ['@babel/preset-env', {
-      'modules': false
+      'modules': false,
+      'targets': {
+        'node': 'current',
+      },
     }]
   ],
   'env': {
diff --git a/example/main.js b/example/main.js
index 63a2cfae..a25f0191 100644
--- a/example/main.js
+++ b/example/main.js
@@ -1,10 +1,6 @@
-import Vue from 'vue'
+import { createApp } from 'vue';
 import Demo from './Demo.vue'
 
-Vue.config.productionTip = false
+const app = createApp(Demo);
 
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  render: h => h(Demo)
-})
+app.mount("#app");
\ No newline at end of file
diff --git a/package.json b/package.json
index 7db09140..592e5a1a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuejs-datepicker",
-  "version": "1.6.2",
+  "version": "2.0.0",
   "description": "A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations",
   "keywords": [
     "vue",
@@ -36,9 +36,8 @@
     "lint",
     "test"
   ],
-  "dependencies": {},
   "peerDependencies": {
-    "vue": "^2.6.10"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",
@@ -51,21 +50,25 @@
     "@babel/preset-stage-2": "^7.0.0",
     "@babel/register": "^7.4.4",
     "@babel/runtime": "^7.4.5",
-    "@vue/test-utils": "^1.0.0-beta.12",
-    "autoprefixer": "^8.3.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/test-utils": "^2.4.1",
+    "@vue/vue3-jest": "^29.2.4",
+    "autoprefixer": "^10.4.14",
     "babel-eslint": "^7.1.1",
-    "babel-jest": "^24.8.0",
+    "babel-jest": "^29.6.2",
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.3.0",
     "coveralls": "^3.0.4",
     "eslint": "^3.19.0",
     "eslint-config-standard": "^6.2.1",
     "eslint-friendly-formatter": "^2.0.7",
-    "eslint-plugin-html": "^2.0.0",
+    "eslint-plugin-html": "^2.0.3",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^2.0.1",
     "eventsource-polyfill": "^0.9.6",
-    "jest": "^24.8.0",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
     "jest-serializer-vue": "^2.0.2",
     "lolex": "^1.5.2",
     "opn": "^4.0.2",
@@ -73,22 +76,19 @@
     "parse5": "^2.1.0",
     "pre-commit": "^1.2.2",
     "rimraf": "^2.6.0",
-    "rollup": "^1.16.2",
-    "rollup-plugin-babel": "^4.3.3",
+    "rollup": "^2.79.1",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-livereload": "^1.0.1",
     "rollup-plugin-node-resolve": "^5.0.4",
-    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-terser": "^5.0.0",
-    "rollup-plugin-vue": "^5.0.0",
+    "rollup-plugin-vue": "^6.0.0",
     "semver": "^5.3.0",
     "shelljs": "^0.8.3",
     "stylus": "^0.54.5",
-    "vue": "^2.6.10",
-    "vue-jest": "^4.0.0-beta.2",
-    "vue-server-renderer": "^2.6.10",
-    "vue-template-compiler": "^2.6.10"
+    "vue": "^3.3.4",
+    "vue-server-renderer": "^2.6.10"
   }
-}
+}
\ No newline at end of file
diff --git a/scripts/build-locale.js b/scripts/build-locale.js
index 5d5d2994..bbed532d 100644
--- a/scripts/build-locale.js
+++ b/scripts/build-locale.js
@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
-import {terser} from 'rollup-plugin-terser'
-import babel from 'rollup-plugin-babel'
+import { terser } from 'rollup-plugin-terser'
+import babel from '@rollup/plugin-babel'
 import commonjs from 'rollup-plugin-commonjs'
 
 const files = fs.readdirSync('./src/locale/translations')
@@ -15,7 +15,7 @@ const config = files.map(file => {
     },
     plugins: [
       commonjs(),
-      babel({exclude: 'node_modules/**'}),
+      babel({ exclude: 'node_modules/**' }),
       terser()
     ]
   }
@@ -30,7 +30,7 @@ const index = {
   },
   plugins: [
     commonjs(),
-    babel({exclude: 'node_modules/**'}),
+    babel({ exclude: 'node_modules/**' }),
     terser()
   ]
 }
diff --git a/scripts/build.js b/scripts/build.js
index 9044fa75..eb8f539f 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -1,7 +1,7 @@
 import path from 'path'
-import {terser} from 'rollup-plugin-terser'
+import { terser } from 'rollup-plugin-terser'
 import vue from 'rollup-plugin-vue'
-import babel from 'rollup-plugin-babel'
+import babel from '@rollup/plugin-babel'
 import postcss from 'rollup-plugin-postcss'
 import autoprefixer from 'autoprefixer'
 import commonjs from 'rollup-plugin-commonjs'
@@ -24,10 +24,10 @@ export default [{
     }
   ],
   plugins: [
-    vue({css: true}),
-    postcss({plugins: [autoprefixer()]}),
+    vue({ css: true }),
+    postcss({ plugins: [autoprefixer()] }),
     commonjs(),
-    babel({exclude: 'node_modules/**'})
+    babel({ exclude: 'node_modules/**' })
   ]
 }, {
   input: path.join(__dirname, '..', 'src', 'components', 'Datepicker.vue'),
@@ -37,10 +37,10 @@ export default [{
     name: 'vuejsDatepicker'
   },
   plugins: [
-    vue({css: true}),
-    postcss({plugins: [autoprefixer()]}),
+    vue({ css: true }),
+    postcss({ plugins: [autoprefixer()] }),
     commonjs(),
     terser(),
-    babel({exclude: 'node_modules/**'})
+    babel({ exclude: 'node_modules/**' })
   ]
 }]
diff --git a/scripts/serve.js b/scripts/serve.js
index 0d0402d6..8ecddba2 100644
--- a/scripts/serve.js
+++ b/scripts/serve.js
@@ -2,10 +2,12 @@ import path from 'path'
 import serve from 'rollup-plugin-serve'
 import livereload from 'rollup-plugin-livereload'
 import vue from 'rollup-plugin-vue'
-import babel from 'rollup-plugin-babel'
+import babel from '@rollup/plugin-babel'
 import resolve from 'rollup-plugin-node-resolve'
 import replace from 'rollup-plugin-replace'
 import common from 'rollup-plugin-commonjs'
+import postcss from 'rollup-plugin-postcss'
+import autoprefixer from 'autoprefixer'
 
 export default {
   input: path.join(__dirname, '..', 'example', 'main.js'),
@@ -19,6 +21,7 @@ export default {
     vue({
       css: true
     }),
+    postcss({ plugins: [autoprefixer()] }),
     replace({
       'process.env.NODE_ENV': JSON.stringify('development')
     }),
@@ -26,16 +29,16 @@ export default {
       mainFields: ['module', 'main']
     }),
     common(),
-    babel({exclude: 'node_modules/**'}),
+    babel({ exclude: 'node_modules/**' }),
     serve({
       open: true,
       contentBase: path.join(__dirname, '..', 'example'),
-      host: 'localhost',
-      port: 10001
+      host: '0.0.0.0',
+      port: 3000
     }),
     livereload({
       verbose: true,
       watch: path.join(__dirname, '..', 'example')
     })
   ]
-}
+}
\ No newline at end of file
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index 67055bef..a487d5bc 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -108,7 +108,7 @@ export default {
     PickerYear
   },
   props: {
-    value: {
+    modelValue: {
       validator: val => utils.validateDateInput(val)
     },
     name: String,
@@ -187,7 +187,7 @@ export default {
     }
   },
   watch: {
-    value (value) {
+    modelValue (value) {
       this.setValue(value)
     },
     openDate () {
@@ -331,7 +331,7 @@ export default {
       this.selectedDate = date
       this.setPageDate(date)
       this.$emit('selected', date)
-      this.$emit('input', date)
+      this.$emit('update:modelValue', date)
     },
     /**
      * Clear the selected date
@@ -340,7 +340,7 @@ export default {
       this.selectedDate = null
       this.setPageDate()
       this.$emit('selected', null)
-      this.$emit('input', null)
+      this.$emit('update:modelValue', null)
       this.$emit('cleared')
     },
     /**
@@ -445,8 +445,8 @@ export default {
      * Initiate the component
      */
     init () {
-      if (this.value) {
-        this.setValue(this.value)
+      if (this.modelValue) {
+        this.setValue(this.modelValue)
       }
       if (this.isInline) {
         this.setInitialView()
@@ -462,4 +462,4 @@ export default {
 </script>
 <style lang="stylus">
 @import '../styles/style'
-</style>
+</style>
\ No newline at end of file
diff --git a/test/unit/jest.conf.js b/test/unit/jest.conf.js
index 37d88bd0..60029272 100644
--- a/test/unit/jest.conf.js
+++ b/test/unit/jest.conf.js
@@ -1,6 +1,10 @@
 const path = require('path')
 
 module.exports = {
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    customExportConditions: ["node", "node-addons"],
+  },
   rootDir: path.resolve(__dirname, '../../'),
   moduleFileExtensions: [
     'js',
@@ -12,7 +16,7 @@ module.exports = {
   },
   transform: {
     '^.+\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest'
+    '.*\\.(vue)$': '@vue/vue3-jest'
   },
   setupFiles: ['<rootDir>/test/unit/setup'],
   coverageDirectory: '<rootDir>/test/unit/coverage',
diff --git a/test/unit/setup.js b/test/unit/setup.js
index edbdbae8..9448490d 100644
--- a/test/unit/setup.js
+++ b/test/unit/setup.js
@@ -1,3 +1 @@
 import Vue from 'vue'
-
-Vue.config.productionTip = false
diff --git a/test/unit/specs/DateInput/DateInput.spec.js b/test/unit/specs/DateInput/DateInput.spec.js
index 82d17e50..1b7d9963 100644
--- a/test/unit/specs/DateInput/DateInput.spec.js
+++ b/test/unit/specs/DateInput/DateInput.spec.js
@@ -1,12 +1,13 @@
 import DateInput from '@/components/DateInput.vue'
-import {shallow} from '@vue/test-utils'
-import {en} from '@/locale'
+import { mount } from '@vue/test-utils'
+import { en } from '@/locale'
 
 describe('DateInput', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(DateInput, {
+    wrapper = mount(DateInput, {
+      shallow: true,
       propsData: {
         selectedDate: new Date(2018, 2, 24),
         format: 'dd MMM yyyy',
@@ -19,8 +20,8 @@ describe('DateInput', () => {
     expect(wrapper.findAll('input')).toHaveLength(1)
   })
 
-  it('nulls date', () => {
-    wrapper.setProps({
+  it('nulls date', async () => {
+    await wrapper.setProps({
       selectedDate: null
     })
     expect(wrapper.vm.formattedValue).toBeNull()
@@ -32,8 +33,8 @@ describe('DateInput', () => {
     expect(wrapper.find('input').element.value).toEqual('24 Mar 2018')
   })
 
-  it('delegates date formatting', () => {
-    wrapper.setProps({
+  it('delegates date formatting', async () => {
+    await wrapper.setProps({
       selectedDate: new Date(2016, 1, 15),
       format: () => '2016/1/15'
     })
@@ -46,15 +47,15 @@ describe('DateInput', () => {
     expect(wrapper.emitted().showCalendar).toBeTruthy()
   })
 
-  it('adds bootstrap classes', () => {
-    wrapper.setProps({
+  it('adds bootstrap classes', async () => {
+    await wrapper.setProps({
       bootstrapStyling: true
     })
     expect(wrapper.find('input').element.classList).toContain('form-control')
   })
 
-  it('appends bootstrap classes', () => {
-    wrapper.setProps({
+  it('appends bootstrap classes', async () => {
+    await wrapper.setProps({
       inputClass: 'someClass',
       bootstrapStyling: true
     })
@@ -62,15 +63,15 @@ describe('DateInput', () => {
     expect(wrapper.find('input').element.classList).toContain('someClass')
   })
 
-  it('can be disabled', () => {
-    wrapper.setProps({
+  it('can be disabled', async () => {
+    await wrapper.setProps({
       disabled: true
     })
     expect(wrapper.find('input').attributes().disabled).toBeDefined()
   })
 
-  it('accepts a function as a formatter', () => {
-    wrapper.setMethods({
+  it('accepts a function as a formatter', async () => {
+    await wrapper.setProps({
       format: () => '!'
     })
     expect(wrapper.find('input').element.value).toEqual('!')
@@ -80,4 +81,4 @@ describe('DateInput', () => {
     wrapper.find('input').trigger('blur')
     expect(wrapper.emitted('closeCalendar')).toBeTruthy()
   })
-})
+})
\ No newline at end of file
diff --git a/test/unit/specs/DateInput/typedDates.spec.js b/test/unit/specs/DateInput/typedDates.spec.js
index ef41ddc5..7f9f21fe 100644
--- a/test/unit/specs/DateInput/typedDates.spec.js
+++ b/test/unit/specs/DateInput/typedDates.spec.js
@@ -1,12 +1,13 @@
 import DateInput from '@/components/DateInput.vue'
-import {shallow} from '@vue/test-utils'
-import {en} from '@/locale'
+import { mount } from '@vue/test-utils'
+import { en } from '@/locale'
 
 describe('DateInput', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(DateInput, {
+    wrapper = mount(DateInput, {
+      shallow: true,
       propsData: {
         format: 'dd MMM yyyy',
         translation: en,
@@ -15,14 +16,14 @@ describe('DateInput', () => {
     })
   })
 
-  it('does not format the date when typed', () => {
+  it('does not format the date when typed', async () => {
     const dateString = '2018-04-24'
     wrapper.vm.input.value = dateString
     expect(wrapper.vm.input.value).toEqual(dateString)
-    wrapper.setData({
+    await wrapper.setData({
       typedDate: dateString
     })
-    wrapper.setProps({
+    await wrapper.setProps({
       selectedDate: new Date(dateString)
     })
     expect(wrapper.vm.typedDate).toEqual(dateString)
@@ -40,19 +41,20 @@ describe('DateInput', () => {
   it('emits closeCalendar when return is pressed', () => {
     const input = wrapper.find('input')
     const blurSpy = jest.spyOn(input.element, 'blur')
-    input.trigger('keyup', {keyCode: 13})
+    input.trigger('keyup', { keyCode: 13 })
     expect(blurSpy).toBeCalled()
   })
 
-  it('clears a typed date if it does not parse', () => {
+  it('clears a typed date if it does not parse', async () => {
     const input = wrapper.find('input')
-    wrapper.setData({typedDate: 'not a date'})
+    await wrapper.setData({ typedDate: 'not a date' })
     input.trigger('blur')
     expect(wrapper.emitted().clearDate).toBeDefined()
   })
 
   it('doesn\'t emit the date if typeable=false', () => {
-    const wrapper = shallow(DateInput, {
+    const wrapper = mount(DateInput, {
+      shallow: true,
       propsData: {
         format: 'dd MMM yyyy',
         translation: en,
@@ -65,4 +67,4 @@ describe('DateInput', () => {
     input.trigger('keyup')
     expect(wrapper.emitted().typedDate).not.toBeDefined()
   })
-})
+})
\ No newline at end of file
diff --git a/test/unit/specs/Datepicker/Datepicker.spec.js b/test/unit/specs/Datepicker/Datepicker.spec.js
index df080e7e..20d79b28 100644
--- a/test/unit/specs/Datepicker/Datepicker.spec.js
+++ b/test/unit/specs/Datepicker/Datepicker.spec.js
@@ -1,6 +1,6 @@
 import Datepicker from '@/components/Datepicker.vue'
 import DateInput from '@/components/DateInput.vue'
-import {shallow, mount} from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 
 describe('Datepicker unmounted', () => {
   it('has a mounted hook', () => {
@@ -23,16 +23,17 @@ describe('Datepicker mounted', () => {
   let date
   beforeEach(() => {
     date = new Date(2016, 1, 15)
-    wrapper = shallow(Datepicker, {
+    wrapper = mount(Datepicker, {
+      shallow: true,
       propsData: {
         format: 'yyyy-MM-dd',
-        value: date
+        modelValue: date
       }
     })
   })
 
   it('correctly sets the value when created', () => {
-    expect(wrapper.vm.value).toEqual(date)
+    expect(wrapper.vm.modelValue).toEqual(date)
   })
 
   it('correctly sets the value from method', () => {
@@ -51,7 +52,8 @@ describe('Datepicker mounted', () => {
 
   it('sets the date', () => {
     const date = new Date(2016, 9, 9)
-    const wrapper = shallow(Datepicker, {
+    const wrapper = mount(Datepicker, {
+      shallow: true,
       propsData: {
         format: 'yyyy-MM-dd'
       }
@@ -62,7 +64,7 @@ describe('Datepicker mounted', () => {
 
   it('clears the date', () => {
     const date = new Date(2016, 9, 9)
-    const wrapper = shallow(Datepicker)
+    const wrapper = mount(Datepicker, { shallow: true })
     wrapper.vm.setDate(date.getTime())
     wrapper.vm.clearDate()
     expect(wrapper.vm.selectedDate).toEqual(null)
@@ -101,13 +103,13 @@ describe('Datepicker mounted', () => {
 
   it('should emit selectedDisabled on a disabled timestamp', () => {
     const date = new Date(2016, 9, 1)
-    wrapper.vm.selectDisabledDate({timestamp: date.getTime()})
+    wrapper.vm.selectDisabledDate({ timestamp: date.getTime() })
     expect(wrapper.emitted().selectedDisabled).toBeTruthy()
   })
 
   it('can select a day', () => {
     const date = new Date(2016, 9, 1)
-    wrapper.vm.selectDate({timestamp: date.getTime()})
+    wrapper.vm.selectDate({ timestamp: date.getTime() })
     expect(wrapper.vm.pageTimestamp).toEqual(date.getTime())
     expect(wrapper.vm.selectedDate.getMonth()).toEqual(9)
     expect(wrapper.vm.showDayView).toEqual(false)
@@ -116,7 +118,7 @@ describe('Datepicker mounted', () => {
 
   it('can select a month', () => {
     const date = new Date(2016, 9, 9)
-    wrapper.vm.selectMonth({timestamp: date.getTime()})
+    wrapper.vm.selectMonth({ timestamp: date.getTime() })
     expect(wrapper.emitted().changedMonth).toBeTruthy()
     expect(wrapper.emitted().changedMonth[0][0].timestamp).toEqual(date.getTime())
     expect(new Date(wrapper.vm.pageTimestamp).getMonth()).toEqual(date.getMonth())
@@ -125,7 +127,7 @@ describe('Datepicker mounted', () => {
 
   it('can select a year', () => {
     const date = new Date(2018, 9, 9)
-    wrapper.vm.selectYear({timestamp: date.getTime()})
+    wrapper.vm.selectYear({ timestamp: date.getTime() })
     expect(wrapper.emitted().changedYear).toBeTruthy()
     expect(wrapper.emitted().changedYear[0][0].timestamp).toEqual(date.getTime())
     expect(new Date(wrapper.vm.pageTimestamp).getFullYear()).toEqual(date.getFullYear())
@@ -133,7 +135,7 @@ describe('Datepicker mounted', () => {
   })
 
   it('resets the default page date', () => {
-    const wrapper = shallow(Datepicker)
+    const wrapper = mount(Datepicker, { shallow: true })
     const today = new Date()
     expect(wrapper.vm.pageDate.getFullYear()).toEqual(today.getFullYear())
     expect(wrapper.vm.pageDate.getMonth()).toEqual(today.getMonth())
@@ -145,7 +147,7 @@ describe('Datepicker mounted', () => {
   })
 
   it('does not set the default page date if a date is selected', () => {
-    const wrapper = shallow(Datepicker)
+    const wrapper = mount(Datepicker, { shallow: true })
     const today = new Date()
     const pastDate = new Date(2018, 3, 20)
     expect(wrapper.vm.pageDate.getFullYear()).toEqual(today.getFullYear())
@@ -159,20 +161,23 @@ describe('Datepicker mounted', () => {
   })
 
   it('sets the date on typedDate event', () => {
-    const wrapper = shallow(Datepicker)
+    const wrapper = mount(Datepicker, { shallow: true })
     const today = new Date()
     wrapper.vm.setTypedDate(today)
     expect(wrapper.vm.selectedDate).toEqual(today)
   })
 
   it('watches value', done => {
-    const wrapper = shallow(Datepicker, {
+    const wrapper = mount(Datepicker, {
+      shallow: true,
       propsData: {
-        value: '2018-01-01'
+        modelValue: '2018-01-01'
       }
     })
     const spy = jest.spyOn(wrapper.vm, 'setValue')
-    wrapper.vm.value = '2018-04-26'
+    wrapper.setProps({
+      modelValue: '2018-04-26'
+    })
     wrapper.vm.$nextTick(() => {
       expect(spy).toBeCalled()
       done()
@@ -180,13 +185,16 @@ describe('Datepicker mounted', () => {
   })
 
   it('watches openDate', done => {
-    const wrapper = shallow(Datepicker, {
+    const wrapper = mount(Datepicker, {
+      shallow: true,
       propsData: {
         openDate: new Date(2018, 0, 1)
       }
     })
     const spy = jest.spyOn(wrapper.vm, 'setPageDate')
-    wrapper.vm.openDate = new Date(2018, 3, 26)
+    wrapper.setProps({
+      openDate: new Date(2018, 3, 26)
+    })
     wrapper.vm.$nextTick(() => {
       expect(spy).toBeCalled()
       done()
@@ -194,13 +202,16 @@ describe('Datepicker mounted', () => {
   })
 
   it('watches initialView', done => {
-    const wrapper = shallow(Datepicker, {
+    const wrapper = mount(Datepicker, {
+      shallow: true,
       propsData: {
         initialView: 'day'
       }
     })
     const spy = jest.spyOn(wrapper.vm, 'setInitialView')
-    wrapper.vm.initialView = 'month'
+    wrapper.setProps({
+      initialView: 'month'
+    })
     wrapper.vm.$nextTick(() => {
       expect(spy).toBeCalled()
       done()
@@ -209,7 +220,7 @@ describe('Datepicker mounted', () => {
 
   it('should emit changedMonth on a month change received from PickerDay', () => {
     const date = new Date(2016, 9, 1)
-    wrapper.vm.handleChangedMonthFromDayPicker({timestamp: date.getTime()})
+    wrapper.vm.handleChangedMonthFromDayPicker({ timestamp: date.getTime() })
     expect(wrapper.emitted().changedMonth).toBeTruthy()
   })
 })
@@ -217,10 +228,11 @@ describe('Datepicker mounted', () => {
 describe('Datepicker.vue set by string', () => {
   let wrapper
   it('can parse a string date', () => {
-    wrapper = shallow(Datepicker, {
+    wrapper = mount(Datepicker, {
+      shallow: true,
       propsData: {
         format: 'yyyy MM dd',
-        value: '2016-02-20'
+        modelValue: '2016-02-20'
       }
     })
     const date = new Date('2016-02-20')
@@ -230,9 +242,10 @@ describe('Datepicker.vue set by string', () => {
   })
 
   it('should nullify malformed value', () => {
-    wrapper = shallow(Datepicker, {
+    wrapper = mount(Datepicker, {
+      shallow: true,
       propsData: {
-        value: 'today'
+        modelValue: 'today'
       }
     })
     expect(wrapper.vm.selectedDate).toBeNull()
@@ -242,10 +255,11 @@ describe('Datepicker.vue set by string', () => {
 describe('Datepicker.vue set by timestamp', () => {
   let wrapper
   it('can parse unix timestamp', () => {
-    wrapper = shallow(Datepicker, {
+    wrapper = mount(Datepicker, {
+      shallow: true,
       propsData: {
         format: 'yyyy MM dd',
-        value: new Date(Date.UTC(2018, 0, 29)).getTime()
+        modelValue: new Date(Date.UTC(2018, 0, 29)).getTime()
       }
     })
     expect(wrapper.vm.selectedDate.getFullYear()).toEqual(2018)
@@ -271,13 +285,13 @@ describe('Datepicker.vue using UTC', () => {
     wrapper = mount(Datepicker, {
       propsData: {
         format: 'yyyy MM dd',
-        value: ambiguousDate,
+        modelValue: ambiguousDate,
         useUtc: true // This should fail if `useUtc=false`
       }
     })
     // It's important to assert the input rendered output
     wrapper.vm.$nextTick(() => {
-      expect(wrapper.find(DateInput).vm.formattedValue).toEqual(UTCString)
+      expect(wrapper.findComponent(DateInput).vm.formattedValue).toEqual(UTCString)
       done()
     })
   })
@@ -286,7 +300,7 @@ describe('Datepicker.vue using UTC', () => {
 describe('Datepicker with initial-view', () => {
   let wrapper
   it('should open in Day view', () => {
-    wrapper = shallow(Datepicker)
+    wrapper = mount(Datepicker, { shallow: true })
     wrapper.vm.showCalendar()
     expect(wrapper.vm.computedInitialView).toEqual('day')
     expect(wrapper.vm.showDayView).toEqual(true)
@@ -295,7 +309,8 @@ describe('Datepicker with initial-view', () => {
   })
 
   it('should open in Month view', () => {
-    wrapper = shallow(Datepicker, {
+    wrapper = mount(Datepicker, {
+      shallow: true,
       propsData: {
         initialView: 'month'
       }
@@ -308,7 +323,8 @@ describe('Datepicker with initial-view', () => {
   })
 
   it('should open in Year view', () => {
-    wrapper = shallow(Datepicker, {
+    wrapper = mount(Datepicker, {
+      shallow: true,
       propsData: {
         initialView: 'year'
       }
@@ -319,4 +335,4 @@ describe('Datepicker with initial-view', () => {
     expect(wrapper.vm.showMonthView).toEqual(false)
     expect(wrapper.vm.showYearView).toEqual(true)
   })
-})
+})
\ No newline at end of file
diff --git a/test/unit/specs/Datepicker/inline.spec.js b/test/unit/specs/Datepicker/inline.spec.js
index 8cb743ae..38daf83c 100644
--- a/test/unit/specs/Datepicker/inline.spec.js
+++ b/test/unit/specs/Datepicker/inline.spec.js
@@ -1,10 +1,11 @@
 import Datepicker from '@/components/Datepicker.vue'
-import {shallow} from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 
 describe('Datepicker.vue inline', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(Datepicker, {
+    wrapper = mount(Datepicker, {
+      shallow: true,
       propsData: {
         inline: true
       }
@@ -18,7 +19,7 @@ describe('Datepicker.vue inline', () => {
 
   it('should not close the calendar when date is selected', () => {
     const date = new Date()
-    wrapper.vm.selectDate({timestamp: date.getTime()})
+    wrapper.vm.selectDate({ timestamp: date.getTime() })
     expect(wrapper.vm.isOpen).toEqual(true)
     document.body.click()
     expect(wrapper.vm.isOpen).toEqual(true)
diff --git a/test/unit/specs/Datepicker/openDate.spec.js b/test/unit/specs/Datepicker/openDate.spec.js
index de2207df..07b48e71 100644
--- a/test/unit/specs/Datepicker/openDate.spec.js
+++ b/test/unit/specs/Datepicker/openDate.spec.js
@@ -1,11 +1,12 @@
 import Datepicker from '@/components/Datepicker.vue'
-import {shallow} from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 
 describe('Datepicker with open date', () => {
   const openDate = new Date(2016, 9, 12)
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(Datepicker, {
+    wrapper = mount(Datepicker, {
+      shallow: true,
       propsData: {
         openDate: openDate
       }
@@ -28,13 +29,13 @@ describe('Datepicker with open date', () => {
 
   it('should open with selected date if one is set', () => {
     const newDate = new Date(2018, 10, 9)
-    wrapper.vm.selectDate({timestamp: newDate.getTime()})
+    wrapper.vm.selectDate({ timestamp: newDate.getTime() })
     expect(wrapper.vm.pageDate.getMonth()).toEqual(10)
     expect(wrapper.vm.pageDate.getFullYear()).toEqual(2018)
   })
 
   it('should show today\'s date if no open date is set', () => {
-    wrapper = shallow(Datepicker)
+    wrapper = mount(Datepicker, { shallow: true })
     const today = new Date()
     expect(wrapper.vm.pageDate.getMonth()).toEqual(today.getMonth())
     expect(wrapper.vm.pageDate.getFullYear()).toEqual(today.getFullYear())
diff --git a/test/unit/specs/PickerDay/changeMonths.spec.js b/test/unit/specs/PickerDay/changeMonths.spec.js
index 57170dc4..dc79060d 100644
--- a/test/unit/specs/PickerDay/changeMonths.spec.js
+++ b/test/unit/specs/PickerDay/changeMonths.spec.js
@@ -1,11 +1,12 @@
 import PickerDay from '@/components/PickerDay.vue'
-import {shallow} from '@vue/test-utils'
-import {en} from '@/locale'
+import { mount } from '@vue/test-utils'
+import { en } from '@/locale'
 
 describe('PickerDay: changing months', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerDay, {
+    wrapper = mount(PickerDay, {
+      shallow: true,
       propsData: {
         translation: en,
         allowedToShowView: () => true,
diff --git a/test/unit/specs/PickerDay/disabledDates.spec.js b/test/unit/specs/PickerDay/disabledDates.spec.js
index 8ed6b3e7..7a0080ab 100644
--- a/test/unit/specs/PickerDay/disabledDates.spec.js
+++ b/test/unit/specs/PickerDay/disabledDates.spec.js
@@ -1,14 +1,15 @@
 import PickerDay from '@/components/PickerDay.vue'
-import {shallow} from '@vue/test-utils'
-import {en} from '@/locale'
+import { mount } from '@vue/test-utils'
+import { en } from '@/locale'
 
 describe('PickerDay: disabled', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerDay, {
+    wrapper = mount(PickerDay, {
+      shallow: true,
       propsData: {
         allowedToShowView: () => true,
-        showMonthCalendar: () => {},
+        showMonthCalendar: () => { },
         translation: en,
         disabledDates: {
           to: new Date(2016, 9, 4),
@@ -25,7 +26,7 @@ describe('PickerDay: disabled', () => {
   })
 
   it('should not select a disabled date', () => {
-    expect(wrapper.vm.selectDate({isDisabled: true})).toEqual(false)
+    expect(wrapper.vm.selectDate({ isDisabled: true })).toEqual(false)
   })
 
   it('cant change to a disabled month', () => {
@@ -39,8 +40,8 @@ describe('PickerDay: disabled', () => {
     expect(wrapper.vm.isNextMonthDisabled()).toBeTruthy()
   })
 
-  it('should detect disabled dates', () => {
-    wrapper.setProps({
+  it('should detect disabled dates', async () => {
+    await wrapper.setProps({
       disabledDates: {
         ranges: [{
           from: new Date(2005, 6, 5),
@@ -55,8 +56,8 @@ describe('PickerDay: disabled', () => {
     expect(wrapper.vm.isDisabledDate(new Date(2026, 9, 2))).toEqual(true)
   })
 
-  it('can accept an array of disabled dates', () => {
-    wrapper.setProps({
+  it('can accept an array of disabled dates', async () => {
+    await wrapper.setProps({
       disabledDates: {
         dates: [
           new Date(2016, 9, 2),
@@ -69,8 +70,8 @@ describe('PickerDay: disabled', () => {
     expect(wrapper.vm.isDisabledDate(new Date(2016, 9, 3))).toEqual(false)
   })
 
-  it('can accept an array of disabled days of the week', () => {
-    wrapper.setProps({
+  it('can accept an array of disabled days of the week', async () => {
+    await wrapper.setProps({
       disabledDates: {
         days: [6, 0]
       }
@@ -79,8 +80,8 @@ describe('PickerDay: disabled', () => {
     expect(wrapper.vm.isDisabledDate(new Date(2016, 9, 3))).toEqual(false)
   })
 
-  it('can accept an array of disabled days of the month', () => {
-    wrapper.setProps({
+  it('can accept an array of disabled days of the month', async () => {
+    await wrapper.setProps({
       disabledDates: {
         daysOfMonth: [29, 30, 31]
       }
@@ -91,10 +92,10 @@ describe('PickerDay: disabled', () => {
     expect(wrapper.vm.isDisabledDate(new Date(2016, 9, 11))).toEqual(false)
   })
 
-  it('can accept a customPredictor to check if the date is disabled', () => {
-    wrapper.setProps({
+  it('can accept a customPredictor to check if the date is disabled', async () => {
+    await wrapper.setProps({
       disabledDates: {
-        customPredictor (date) {
+        customPredictor(date) {
           if (date.getDate() % 4 === 0) {
             return true
           }
@@ -108,7 +109,7 @@ describe('PickerDay: disabled', () => {
   })
 
   it('should emit a selectedDisabled event for a disabled date', () => {
-    expect(wrapper.vm.selectDate({isDisabled: true})).toEqual(false)
+    expect(wrapper.vm.selectDate({ isDisabled: true })).toEqual(false)
     expect(wrapper.emitted().selectedDisabled).toBeTruthy()
   })
-})
+})
\ No newline at end of file
diff --git a/test/unit/specs/PickerDay/highlightedDates.spec.js b/test/unit/specs/PickerDay/highlightedDates.spec.js
index e2a31738..ae887fc7 100644
--- a/test/unit/specs/PickerDay/highlightedDates.spec.js
+++ b/test/unit/specs/PickerDay/highlightedDates.spec.js
@@ -1,11 +1,12 @@
 import PickerDay from '@/components/PickerDay.vue'
-import {shallow} from '@vue/test-utils'
-import {en} from '@/locale'
+import { mount } from '@vue/test-utils'
+import { en } from '@/locale'
 
 describe('PickerDay highlight date', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerDay, {
+    wrapper = mount(PickerDay, {
+      shallow: true,
       propsData: {
         allowedToShowView: () => true,
         translation: en,
@@ -15,7 +16,7 @@ describe('PickerDay highlight date', () => {
           from: new Date(2016, 12, 4)
         },
         disabledDates: {
-          dates: [ new Date(2016, 12, 5) ]
+          dates: [new Date(2016, 12, 5)]
         }
       }
     })
@@ -30,8 +31,8 @@ describe('PickerDay highlight date', () => {
     expect(wrapper.vm.isHighlightedDate(new Date(2016, 12, 5))).toEqual(false)
   })
 
-  it('should highlight a disabled date when explicitly configured to', () => {
-    wrapper.setProps({
+  it('should highlight a disabled date when explicitly configured to', async () => {
+    await wrapper.setProps({
       highlighted: {
         to: new Date(2016, 12, 8),
         from: new Date(2016, 12, 4),
@@ -57,8 +58,8 @@ describe('PickerDay highlight date', () => {
     expect(wrapper.vm.isHighlightedDate(new Date(2016, 12, 3))).toEqual(false)
   })
 
-  it('can accept an array of highlighted dates', () => {
-    wrapper.setProps({
+  it('can accept an array of highlighted dates', async () => {
+    await wrapper.setProps({
       highlighted: {
         dates: [
           new Date(2016, 9, 2),
@@ -71,8 +72,8 @@ describe('PickerDay highlight date', () => {
     expect(wrapper.vm.isHighlightedDate(new Date(2016, 9, 3))).toEqual(false)
   })
 
-  it('can accept an array of highlighted days of the week', () => {
-    wrapper.setProps({
+  it('can accept an array of highlighted days of the week', async () => {
+    await wrapper.setProps({
       highlighted: {
         days: [6, 0]
       }
@@ -81,8 +82,8 @@ describe('PickerDay highlight date', () => {
     expect(wrapper.vm.isHighlightedDate(new Date(2016, 9, 3))).toEqual(false)
   })
 
-  it('can accept an array of highlighted days of the month', () => {
-    wrapper.setProps({
+  it('can accept an array of highlighted days of the month', async () => {
+    await wrapper.setProps({
       highlighted: {
         daysOfMonth: [1, 10, 31]
       }
@@ -95,10 +96,10 @@ describe('PickerDay highlight date', () => {
     expect(wrapper.vm.isHighlightedDate(new Date(2016, 7, 20))).toEqual(false)
   })
 
-  it('can accept a customPredictor to check if the date is highlighted', () => {
-    wrapper.setProps({
+  it('can accept a customPredictor to check if the date is highlighted', async () => {
+    await wrapper.setProps({
       highlighted: {
-        customPredictor (date) {
+        customPredictor(date) {
           if (date.getDate() % 5 === 0) {
             return true
           }
@@ -122,4 +123,4 @@ describe('PickerDay highlight date', () => {
     expect(wrapper.vm.isHighlightEnd(new Date(2016, 12, 6))).toEqual(false)
     expect(wrapper.vm.isHighlightEnd(new Date(2016, 12, 7))).toEqual(false)
   })
-})
+})
\ No newline at end of file
diff --git a/test/unit/specs/PickerDay/initialDom.spec.js b/test/unit/specs/PickerDay/initialDom.spec.js
index 06d5c506..08117aa3 100644
--- a/test/unit/specs/PickerDay/initialDom.spec.js
+++ b/test/unit/specs/PickerDay/initialDom.spec.js
@@ -1,11 +1,12 @@
 import PickerDay from '@/components/PickerDay.vue'
-import {shallow} from '@vue/test-utils'
-import {en} from '@/locale'
+import { mount } from '@vue/test-utils'
+import { en } from '@/locale'
 
 describe('PickerDay: DOM', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerDay, {
+    wrapper = mount(PickerDay, {
+      shallow: true,
       propsData: {
         allowedToShowView: () => true,
         translation: en,
diff --git a/test/unit/specs/PickerDay/mondayFirst.spec.js b/test/unit/specs/PickerDay/mondayFirst.spec.js
index 59458385..acd19f45 100644
--- a/test/unit/specs/PickerDay/mondayFirst.spec.js
+++ b/test/unit/specs/PickerDay/mondayFirst.spec.js
@@ -1,11 +1,12 @@
 import PickerDay from '@/components/PickerDay.vue'
-import {shallow} from '@vue/test-utils'
-import {en} from '@/locale'
+import { mount } from '@vue/test-utils'
+import { en } from '@/locale'
 
 describe('PickerDay: Datepicker with monday as first day of week', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerDay, {
+    wrapper = mount(PickerDay, {
+      shallow: true,
       propsData: {
         mondayFirst: true,
         translation: en,
@@ -23,17 +24,17 @@ describe('PickerDay: Datepicker with monday as first day of week', () => {
     expect(wrapper.vm.daysOfWeek[6]).toEqual('Sun')
   })
 
-  it('should have 6 blankDays when month starts from Sunday', () => {
-    wrapper.setProps({
+  it('should have 6 blankDays when month starts from Sunday', async () => {
+    await wrapper.setProps({
       pageDate: new Date(2018, 3, 1)
     })
     expect(wrapper.vm.blankDays).toEqual(6)
   })
 
-  it('should have no blankDays when month starts from Monday', () => {
-    wrapper.setProps({
+  it('should have no blankDays when month starts from Monday', async () => {
+    await wrapper.setProps({
       pageDate: new Date(2018, 9, 1)
     })
     expect(wrapper.vm.blankDays).toEqual(0)
   })
-})
+})
\ No newline at end of file
diff --git a/test/unit/specs/PickerDay/pickerDay.spec.js b/test/unit/specs/PickerDay/pickerDay.spec.js
index 5b17558c..fbf9bafd 100644
--- a/test/unit/specs/PickerDay/pickerDay.spec.js
+++ b/test/unit/specs/PickerDay/pickerDay.spec.js
@@ -1,11 +1,12 @@
 import PickerDay from '@/components/PickerDay.vue'
-import {shallow} from '@vue/test-utils'
-import {en} from '@/locale'
+import { mount } from '@vue/test-utils'
+import { en } from '@/locale'
 
 describe('PickerDay: DOM', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerDay, {
+    wrapper = mount(PickerDay, {
+      shallow: true,
       propsData: {
         allowedToShowView: () => true,
         translation: en,
@@ -15,9 +16,9 @@ describe('PickerDay: DOM', () => {
     })
   })
 
-  it('knows the selected date', () => {
+  it('knows the selected date', async () => {
     const newDate = new Date(2016, 9, 15)
-    wrapper.setProps({
+    await wrapper.setProps({
       selectedDate: newDate
     })
     expect(wrapper.vm.isSelectedDate(newDate)).toEqual(true)
@@ -25,7 +26,7 @@ describe('PickerDay: DOM', () => {
   })
 
   it('emits an event when selected', () => {
-    wrapper.vm.selectDate({isDisabled: false})
+    wrapper.vm.selectDate({ isDisabled: false })
     expect(wrapper.emitted().selectDate).toBeTruthy()
   })
 
@@ -38,4 +39,4 @@ describe('PickerDay: DOM', () => {
     yearBtn.trigger('click')
     expect(wrapper.emitted().showMonthCalendar).toBeTruthy()
   })
-})
+})
\ No newline at end of file
diff --git a/test/unit/specs/PickerMonth/disabledMonths.spec.js b/test/unit/specs/PickerMonth/disabledMonths.spec.js
index 03492364..098752ef 100644
--- a/test/unit/specs/PickerMonth/disabledMonths.spec.js
+++ b/test/unit/specs/PickerMonth/disabledMonths.spec.js
@@ -1,11 +1,12 @@
 import PickerMonth from '@/components/PickerMonth.vue'
-import {shallow} from '@vue/test-utils'
-import {en} from '@/locale'
+import { mount } from '@vue/test-utils'
+import { en } from '@/locale'
 
 describe('PickerMonth', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerMonth, {
+    wrapper = mount(PickerMonth, {
+      shallow: true,
       propsData: {
         allowedToShowView: () => true,
         translation: en,
@@ -20,14 +21,14 @@ describe('PickerMonth', () => {
   })
 
   it('cant select a disabled month', () => {
-    const month = {isDisabled: true}
+    const month = { isDisabled: true }
     expect(wrapper.vm.selectMonth(month)).toEqual(false)
   })
 
-  it('can accept a customPredictor to check if the month is disabled', () => {
-    wrapper.setProps({
+  it('can accept a customPredictor to check if the month is disabled', async () => {
+    await wrapper.setProps({
       disabledDates: {
-        customPredictor (date) {
+        customPredictor(date) {
           if (date.getMonth() % 4 === 0) {
             return true
           }
@@ -39,4 +40,4 @@ describe('PickerMonth', () => {
     expect(wrapper.vm.isDisabledMonth(new Date(2018, 8, 24))).toEqual(true)
     expect(wrapper.vm.isDisabledMonth(new Date(2018, 2, 11))).toEqual(false)
   })
-})
+})
\ No newline at end of file
diff --git a/test/unit/specs/PickerMonth/pickerMonth.spec.js b/test/unit/specs/PickerMonth/pickerMonth.spec.js
index 985bc428..5c7280e1 100644
--- a/test/unit/specs/PickerMonth/pickerMonth.spec.js
+++ b/test/unit/specs/PickerMonth/pickerMonth.spec.js
@@ -1,11 +1,12 @@
 import PickerMonth from '@/components/PickerMonth.vue'
-import {shallow} from '@vue/test-utils'
-import {en} from '@/locale'
+import { mount } from '@vue/test-utils'
+import { en } from '@/locale'
 
 describe('PickerMonth', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerMonth, {
+    wrapper = mount(PickerMonth, {
+      shallow: true,
       propsData: {
         allowedToShowView: () => true,
         translation: en,
@@ -15,9 +16,9 @@ describe('PickerMonth', () => {
     })
   })
 
-  it('knows the selected month', () => {
+  it('knows the selected month', async () => {
     const newDate = new Date(2016, 9, 15)
-    wrapper.setProps({
+    await wrapper.setProps({
       selectedDate: newDate
     })
     expect(wrapper.vm.isSelectedMonth(newDate)).toEqual(true)
@@ -36,7 +37,7 @@ describe('PickerMonth', () => {
 
   it('emits date on selection', () => {
     const time = new Date().getTime()
-    wrapper.vm.selectMonth({timestamp: time})
+    wrapper.vm.selectMonth({ timestamp: time })
     expect(wrapper.emitted().selectMonth).toBeTruthy()
     expect(wrapper.emitted().selectMonth[0][0].timestamp).toEqual(time)
   })
@@ -46,4 +47,4 @@ describe('PickerMonth', () => {
     yearBtn.trigger('click')
     expect(wrapper.emitted().showYearCalendar).toBeTruthy()
   })
-})
+})
\ No newline at end of file
diff --git a/test/unit/specs/PickerYear/disabledYears.spec.js b/test/unit/specs/PickerYear/disabledYears.spec.js
index 1dfcc36e..2ee4ee88 100644
--- a/test/unit/specs/PickerYear/disabledYears.spec.js
+++ b/test/unit/specs/PickerYear/disabledYears.spec.js
@@ -1,11 +1,12 @@
 import PickerYear from '@/components/PickerYear.vue'
-import {shallow} from '@vue/test-utils'
-import {en} from '@/locale'
+import { mount } from '@vue/test-utils'
+import { en } from '@/locale'
 
 describe('PickerYear', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerYear, {
+    wrapper = mount(PickerYear, {
+      shallow: true,
       propsData: {
         allowedToShowView: () => true,
         translation: en,
@@ -20,7 +21,7 @@ describe('PickerYear', () => {
   })
 
   it('cant select a disabled year', () => {
-    const year = {isDisabled: true}
+    const year = { isDisabled: true }
     expect(wrapper.vm.selectYear(year)).toEqual(false)
   })
 
@@ -29,8 +30,8 @@ describe('PickerYear', () => {
     expect(wrapper.vm.nextDecade()).toEqual(false)
   })
 
-  it('can\'t change decade when previous or next decades are disabled', () => {
-    wrapper.setProps({
+  it('can\'t change decade when previous or next decades are disabled', async () => {
+    await wrapper.setProps({
       pageDate: new Date(2016, 9, 15),
       disabledDates: {
         to: new Date(2010, 8, 6),
@@ -41,8 +42,8 @@ describe('PickerYear', () => {
     expect(wrapper.vm.isNextDecadeDisabled()).toEqual(true)
   })
 
-  it('can change decade despite having a disabled decade', () => {
-    wrapper.setProps({
+  it('can change decade despite having a disabled decade', async () => {
+    await wrapper.setProps({
       pageDate: new Date(2016, 9, 15),
       disabledDates: {
         to: new Date(2010, 11, 19),
@@ -53,10 +54,10 @@ describe('PickerYear', () => {
     expect(wrapper.vm.isNextDecadeDisabled()).toEqual(false)
   })
 
-  it('can accept a customPredictor to check if the year is disabled', () => {
-    wrapper.setProps({
+  it('can accept a customPredictor to check if the year is disabled', async () => {
+    await wrapper.setProps({
       disabledDates: {
-        customPredictor (date) {
+        customPredictor(date) {
           if (date.getFullYear() % 3 === 0) {
             return true
           }
@@ -70,8 +71,8 @@ describe('PickerYear', () => {
     expect(wrapper.vm.isDisabledYear(new Date(2022, 2, 11))).toEqual(true)
   })
 
-  it('does not disable the next decade button when disabled from date is in the first year of the next decade', () => {
-    wrapper.setProps({
+  it('does not disable the next decade button when disabled from date is in the first year of the next decade', async () => {
+    await wrapper.setProps({
       pageDate: new Date(1998, 9, 15),
       disabledDates: {
         from: new Date(2000, 0, 1)
@@ -80,12 +81,12 @@ describe('PickerYear', () => {
     expect(wrapper.vm.isNextDecadeDisabled()).toEqual(false)
   })
 
-  it('does disable the next decade button when disabled from date is the last day year of the current decade', () => {
-    wrapper.setProps({
+  it('does disable the next decade button when disabled from date is the last day year of the current decade', async () => {
+    await wrapper.setProps({
       disabledDates: {
         from: new Date(1999, 12, 31)
       }
     })
     expect(wrapper.vm.isNextDecadeDisabled()).toEqual(true)
   })
-})
+})
\ No newline at end of file
diff --git a/test/unit/specs/PickerYear/pickerYear.spec.js b/test/unit/specs/PickerYear/pickerYear.spec.js
index a3c05d8d..e292333e 100644
--- a/test/unit/specs/PickerYear/pickerYear.spec.js
+++ b/test/unit/specs/PickerYear/pickerYear.spec.js
@@ -1,11 +1,12 @@
 import PickerYear from '@/components/PickerYear.vue'
-import {shallow} from '@vue/test-utils'
-import {en} from '@/locale'
+import { mount } from '@vue/test-utils'
+import { en } from '@/locale'
 
 describe('PickerYear', () => {
   let wrapper
   beforeEach(() => {
-    wrapper = shallow(PickerYear, {
+    wrapper = mount(PickerYear, {
+      shallow: true,
       propsData: {
         allowedToShowView: () => true,
         translation: en,
@@ -15,9 +16,9 @@ describe('PickerYear', () => {
     })
   })
 
-  it('knows the selected year', () => {
+  it('knows the selected year', async () => {
     const newDate = new Date(2016, 9, 15)
-    wrapper.setProps({
+    await wrapper.setProps({
       selectedDate: newDate
     })
     expect(wrapper.vm.isSelectedYear(newDate)).toEqual(true)
@@ -34,19 +35,19 @@ describe('PickerYear', () => {
     expect(wrapper.emitted().changedDecade).toBeTruthy()
   })
 
-  it('formats the decade range', () => {
-    wrapper.setProps({
+  it('formats the decade range', async () => {
+    await wrapper.setProps({
       pageDate: new Date(2021, 1, 1)
     })
     expect(wrapper.vm.getPageDecade).toEqual('2020 - 2029')
-    wrapper.setProps({
+    await wrapper.setProps({
       pageDate: new Date(2001, 1, 1)
     })
     expect(wrapper.vm.getPageDecade).toEqual('2000 - 2009')
   })
 
   it('emits an event when selected', () => {
-    wrapper.vm.selectYear({isDisabled: false})
+    wrapper.vm.selectYear({ isDisabled: false })
     expect(wrapper.emitted().selectYear).toBeTruthy()
   })
-})
+})
\ No newline at end of file