diff --git a/package.json b/package.json
index 539446c4d3..aa07c7b059 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@types/debug": "^4.1.5",
     "@types/lodash": "^4.14.149",
     "@types/nanoid": "^2.1.0",
-    "@vue/composition-api": "^0.3.4",
+    "@vue/composition-api": "^0.4.0",
     "axios": "^0.19.2",
     "date-fns": "^2.9.0",
     "lodash": "^4.17.15",
diff --git a/src/components/v-avatar/v-avatar.vue b/src/components/v-avatar/v-avatar.vue
index 31a7da1ad7..ed14759211 100644
--- a/src/components/v-avatar/v-avatar.vue
+++ b/src/components/v-avatar/v-avatar.vue
@@ -5,11 +5,11 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '../../utils/parse-css-var';
 import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		size: {
 			type: Number,
diff --git a/src/components/v-badge/v-badge.vue b/src/components/v-badge/v-badge.vue
index 1d82848a2e..6be520eb99 100644
--- a/src/components/v-badge/v-badge.vue
+++ b/src/components/v-badge/v-badge.vue
@@ -10,9 +10,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent, reactive, computed, Ref } from '@vue/composition-api';
+import { defineComponent, reactive, computed, Ref } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		value: {
 			type: String,
diff --git a/src/components/v-breadcrumb/v-breadcrumb.vue b/src/components/v-breadcrumb/v-breadcrumb.vue
index 571ef24aac..c685a59ee4 100644
--- a/src/components/v-breadcrumb/v-breadcrumb.vue
+++ b/src/components/v-breadcrumb/v-breadcrumb.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, PropType } from '@vue/composition-api';
+import { defineComponent, ref, PropType } from '@vue/composition-api';
 
 interface Breadcrumb {
 	to: string;
@@ -29,7 +29,7 @@ interface Breadcrumb {
 	disabled?: boolean;
 }
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		items: {
 			type: Array as PropType<Breadcrumb[]>,
diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue
index fcef728acd..a15d7cdd39 100644
--- a/src/components/v-button/v-button.vue
+++ b/src/components/v-button/v-button.vue
@@ -19,12 +19,12 @@
 </template>
 
 <script lang="ts">
-import { createComponent, reactive, computed, Ref, PropType } from '@vue/composition-api';
+import { defineComponent, reactive, computed, Ref, PropType } from '@vue/composition-api';
 import { Location } from 'vue-router';
 import parseCSSVar from '@/utils/parse-css-var';
 import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		block: {
 			type: Boolean,
diff --git a/src/components/v-checkbox/v-checkbox.vue b/src/components/v-checkbox/v-checkbox.vue
index 8a85911757..f8fb53de41 100644
--- a/src/components/v-checkbox/v-checkbox.vue
+++ b/src/components/v-checkbox/v-checkbox.vue
@@ -16,10 +16,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 
-export default createComponent({
+export default defineComponent({
 	model: {
 		prop: 'inputValue',
 		event: 'change'
diff --git a/src/components/v-chip/v-chip.vue b/src/components/v-chip/v-chip.vue
index ce472f19e5..174b5025a5 100644
--- a/src/components/v-chip/v-chip.vue
+++ b/src/components/v-chip/v-chip.vue
@@ -20,11 +20,11 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, computed } from '@vue/composition-api';
+import { defineComponent, ref, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		active: {
 			type: Boolean,
diff --git a/src/components/v-hover/v-hover.vue b/src/components/v-hover/v-hover.vue
index 63da1afb2f..080d79c92d 100644
--- a/src/components/v-hover/v-hover.vue
+++ b/src/components/v-hover/v-hover.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		closeDelay: {
 			type: Number,
diff --git a/src/components/v-icon/v-icon.vue b/src/components/v-icon/v-icon.vue
index 71f260b355..2ddeb30c9e 100644
--- a/src/components/v-icon/v-icon.vue
+++ b/src/components/v-icon/v-icon.vue
@@ -11,14 +11,14 @@
 </template>
 
 <script lang="ts">
-import { createComponent, reactive, computed } from '@vue/composition-api';
+import { defineComponent, reactive, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 import CustomIconBox from './custom-icons/box.vue';
 import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
 const customIcons: string[] = ['box'];
 
-export default createComponent({
+export default defineComponent({
 	components: { CustomIconBox },
 	props: {
 		name: {
diff --git a/src/components/v-input/v-input.vue b/src/components/v-input/v-input.vue
index e2c04c8a81..a32136bd23 100644
--- a/src/components/v-input/v-input.vue
+++ b/src/components/v-input/v-input.vue
@@ -27,9 +27,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	inheritAttrs: false,
 	props: {
 		autofocus: {
diff --git a/src/components/v-item-group/v-item-group.readme.md b/src/components/v-item-group/v-item-group.readme.md
index f957e0a85e..57436263c4 100644
--- a/src/components/v-item-group/v-item-group.readme.md
+++ b/src/components/v-item-group/v-item-group.readme.md
@@ -17,9 +17,9 @@ Provides the ability to make groups of items out of any nested component. Can be
 </template>
 
 <script lang="ts">
-import { createComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const selection = ref([]);
 		return { selection };
@@ -102,9 +102,9 @@ By default, the `v-item-group` component will use the index of the child as mode
 </template>
 
 <script lang="ts">
-import { createComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const selection = ref([]);
 		const items = [
diff --git a/src/components/v-item-group/v-item-group.vue b/src/components/v-item-group/v-item-group.vue
index 02bcb9998e..98c33e22e7 100644
--- a/src/components/v-item-group/v-item-group.vue
+++ b/src/components/v-item-group/v-item-group.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import Vue, { VNode } from 'vue';
 import {
-	createComponent,
+	defineComponent,
 	ref,
 	provide,
 	PropType,
@@ -20,7 +20,7 @@ import { useGroupableParent } from '@/compositions/groupable';
 import arraysAreEqual from '@/utils/arrays-are-equal';
 import { notEmpty } from '@/utils/is-empty';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		mandatory: {
 			type: Boolean,
diff --git a/src/components/v-item-group/v-item.vue b/src/components/v-item-group/v-item.vue
index 84c711a1a6..f291d471bb 100644
--- a/src/components/v-item-group/v-item.vue
+++ b/src/components/v-item-group/v-item.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, provide } from '@vue/composition-api';
+import { defineComponent, ref, provide } from '@vue/composition-api';
 import { useGroupable } from '@/compositions/groupable';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		value: {
 			type: String,
diff --git a/src/components/v-list/v-list-item.vue b/src/components/v-list/v-list-item.vue
index ea5e1f148e..d26d891794 100644
--- a/src/components/v-list/v-list-item.vue
+++ b/src/components/v-list/v-list-item.vue
@@ -13,9 +13,9 @@
 
 <script lang="ts">
 import { Location } from 'vue-router';
-import { createComponent, PropType, computed } from '@vue/composition-api';
+import { defineComponent, PropType, computed } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		dense: {
 			type: Boolean,
diff --git a/src/components/v-list/v-list.vue b/src/components/v-list/v-list.vue
index 8ca6774085..6735948470 100644
--- a/src/components/v-list/v-list.vue
+++ b/src/components/v-list/v-list.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		dense: {
 			type: Boolean,
diff --git a/src/components/v-notice/v-notice.vue b/src/components/v-notice/v-notice.vue
index 9b55a66b5e..59263c3891 100644
--- a/src/components/v-notice/v-notice.vue
+++ b/src/components/v-notice/v-notice.vue
@@ -6,9 +6,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		success: {
 			type: Boolean,
diff --git a/src/components/v-overlay/v-overlay.vue b/src/components/v-overlay/v-overlay.vue
index 7b73805bd7..6232214192 100644
--- a/src/components/v-overlay/v-overlay.vue
+++ b/src/components/v-overlay/v-overlay.vue
@@ -6,10 +6,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		active: {
 			type: Boolean,
diff --git a/src/components/v-progress/circular/v-progress-circular.vue b/src/components/v-progress/circular/v-progress-circular.vue
index cbd24c6aa7..d825e05187 100644
--- a/src/components/v-progress/circular/v-progress-circular.vue
+++ b/src/components/v-progress/circular/v-progress-circular.vue
@@ -18,11 +18,11 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		indeterminate: {
 			type: Boolean,
diff --git a/src/components/v-progress/linear/v-progress-linear.vue b/src/components/v-progress/linear/v-progress-linear.vue
index baac237695..354ef2c764 100644
--- a/src/components/v-progress/linear/v-progress-linear.vue
+++ b/src/components/v-progress/linear/v-progress-linear.vue
@@ -22,10 +22,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		absolute: {
 			type: Boolean,
diff --git a/src/components/v-sheet/v-sheet.vue b/src/components/v-sheet/v-sheet.vue
index 1a4b5ac8fe..a7b34a55f2 100644
--- a/src/components/v-sheet/v-sheet.vue
+++ b/src/components/v-sheet/v-sheet.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {},
 	setup() {
 		return {};
diff --git a/src/components/v-slider/v-slider.vue b/src/components/v-slider/v-slider.vue
index 123859d8ac..1d1169b43c 100644
--- a/src/components/v-slider/v-slider.vue
+++ b/src/components/v-slider/v-slider.vue
@@ -32,11 +32,11 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 import { ChangeEvent } from 'react';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		showThumbLabel: {
 			type: Boolean,
diff --git a/src/components/v-switch/v-switch.vue b/src/components/v-switch/v-switch.vue
index 90ea44c663..e9ad10eb42 100644
--- a/src/components/v-switch/v-switch.vue
+++ b/src/components/v-switch/v-switch.vue
@@ -15,10 +15,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 
-export default createComponent({
+export default defineComponent({
 	model: {
 		prop: 'inputValue',
 		event: 'change'
diff --git a/src/components/v-table/_table-header.vue b/src/components/v-table/_table-header.vue
index fa6ae8e11f..2adedcd816 100644
--- a/src/components/v-table/_table-header.vue
+++ b/src/components/v-table/_table-header.vue
@@ -34,12 +34,12 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, onMounted, onBeforeUnmount, PropType } from '@vue/composition-api';
+import { defineComponent, ref, onMounted, onBeforeUnmount, PropType } from '@vue/composition-api';
 import useEventListener from '@/compositions/event-listener';
 import { Alignment, Header, Sort } from './types';
 import { throttle, clone } from 'lodash';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		headers: {
 			type: Array as PropType<Header[]>,
diff --git a/src/components/v-table/_table-row.vue b/src/components/v-table/_table-row.vue
index e3e935935a..5a39eb9ff3 100644
--- a/src/components/v-table/_table-row.vue
+++ b/src/components/v-table/_table-row.vue
@@ -23,10 +23,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, PropType } from '@vue/composition-api';
+import { defineComponent, PropType } from '@vue/composition-api';
 import { Header, Sort } from './types';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		headers: {
 			type: Array as PropType<Header[]>,
diff --git a/src/components/v-table/v-table.readme.md b/src/components/v-table/v-table.readme.md
index d52674c0e7..01f99c9863 100644
--- a/src/components/v-table/v-table.readme.md
+++ b/src/components/v-table/v-table.readme.md
@@ -86,10 +86,10 @@ Adding the `show-resize` prop allows the user to resize the columns at will. You
 </template>
 
 <script>
-import { createComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref } from '@vue/composition-api';
 import { HeaderRaw } from '@/components/v-table/types';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const headers = ref<HeaderRaw[]>([
 			{
diff --git a/src/components/v-table/v-table.vue b/src/components/v-table/v-table.vue
index 04300c1ccf..2cad346c8d 100644
--- a/src/components/v-table/v-table.vue
+++ b/src/components/v-table/v-table.vue
@@ -60,7 +60,7 @@
 
 <script lang="ts">
 import { VNode } from 'vue';
-import { createComponent, computed, ref, watch, Ref, PropType } from '@vue/composition-api';
+import { defineComponent, computed, ref, watch, Ref, PropType } from '@vue/composition-api';
 import { Header, HeaderRaw, ItemSelectEvent, Sort } from './types';
 import TableHeader from './_table-header.vue';
 import TableRow from './_table-row.vue';
@@ -77,7 +77,7 @@ const HeaderDefaults: Header = {
 	width: null
 };
 
-export default createComponent({
+export default defineComponent({
 	components: {
 		TableHeader,
 		TableRow,
diff --git a/src/compositions/readme.md b/src/compositions/readme.md
index 48eab9e515..794c9c9fed 100644
--- a/src/compositions/readme.md
+++ b/src/compositions/readme.md
@@ -20,10 +20,10 @@ The composition removes the event handler whenever the component is unmounted.
 ### Usage
 
 ```js
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import useEventListener from '@/compositions/event-listener';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		useEventListener(window, 'scroll', onScroll);
 
@@ -43,10 +43,10 @@ Shared size class prop handler for base components. Adds `x-small`, `small`, `la
 ### Usage
 
 ```js
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		...sizeProps
 	},
@@ -65,10 +65,10 @@ Returns ref string time from current datetime based on date-fns formatDistance.
 ### Usage
 
 ```js
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import useTimeFromNow from '@/compositions/time-from-now';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const date = new Date('2020-01-01T13:55');
 		const timeFromNow = useTimeFromNow(date);
@@ -87,10 +87,10 @@ Returns a `ref` of `width` and `height` of the current window size. Updates the
 ### Usage
 
 ```js
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import useWindowSize from '@/compositions/window-size';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const { width, height } = useWindowSize();
 	}
diff --git a/src/layouts/tabular/tabular.vue b/src/layouts/tabular/tabular.vue
index 6d9794022a..b85112dadb 100644
--- a/src/layouts/tabular/tabular.vue
+++ b/src/layouts/tabular/tabular.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {},
 	setup() {
 		return {};
diff --git a/src/modules/collections/components/collections-navigation.vue b/src/modules/collections/components/collections-navigation.vue
index 7593bcd7ef..079e04fb27 100644
--- a/src/modules/collections/components/collections-navigation.vue
+++ b/src/modules/collections/components/collections-navigation.vue
@@ -9,11 +9,11 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import VueI18n from 'vue-i18n';
 import useNavigation from '../compositions/use-navigation';
 
-export default createComponent({
+export default defineComponent({
 	props: {},
 	setup() {
 		const { navItems } = useNavigation();
diff --git a/src/modules/collections/routes/collections-overview.vue b/src/modules/collections/routes/collections-overview.vue
index 329f861554..736a781cdb 100644
--- a/src/modules/collections/routes/collections-overview.vue
+++ b/src/modules/collections/routes/collections-overview.vue
@@ -13,13 +13,13 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import CollectionsNavigation from '../components/collections-navigation.vue';
 import { i18n } from '@/lang';
 import useNavigation, { NavItem } from '../compositions/use-navigation';
 import router from '@/router';
 
-export default createComponent({
+export default defineComponent({
 	components: {
 		CollectionsNavigation
 	},
diff --git a/src/routes/debug.vue b/src/routes/debug.vue
index 53f8929018..439d30425e 100644
--- a/src/routes/debug.vue
+++ b/src/routes/debug.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import api from '@/api';
 
-export default createComponent({
+export default defineComponent({
 	props: {},
 	setup() {
 		return { forceLogout };
diff --git a/src/routes/login/login.vue b/src/routes/login/login.vue
index a9884b9981..efc059e34f 100644
--- a/src/routes/login/login.vue
+++ b/src/routes/login/login.vue
@@ -14,13 +14,13 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref } from '@vue/composition-api';
 import api from '@/api';
 import { useProjectsStore } from '@/stores/projects';
 import router from '@/router';
 import { login } from '@/auth';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const projectsStore = useProjectsStore();
 
diff --git a/src/routes/project-chooser/project-chooser.vue b/src/routes/project-chooser/project-chooser.vue
index 8e7fe1af0b..900923dd9f 100644
--- a/src/routes/project-chooser/project-chooser.vue
+++ b/src/routes/project-chooser/project-chooser.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@vue/composition-api';
-export default createComponent({
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
 	props: {},
 	setup() {
 		return {};
diff --git a/src/views/private/_drawer-detail-group.vue b/src/views/private/_drawer-detail-group.vue
index 731c81cdd5..aedf9931ba 100644
--- a/src/views/private/_drawer-detail-group.vue
+++ b/src/views/private/_drawer-detail-group.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, watch, toRefs } from '@vue/composition-api';
+import { defineComponent, ref, watch, toRefs } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		drawerOpen: {
 			type: Boolean,
diff --git a/src/views/private/_module-bar-logo.vue b/src/views/private/_module-bar-logo.vue
index e16510d496..79fe32c9d7 100644
--- a/src/views/private/_module-bar-logo.vue
+++ b/src/views/private/_module-bar-logo.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, computed, watch } from '@vue/composition-api';
+import { defineComponent, ref, computed, watch } from '@vue/composition-api';
 import { useProjectsStore } from '@/stores/projects';
 import { ProjectWithKey, ProjectError } from '@/stores/projects/types';
 import { useRequestsStore } from '@/stores/requests';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const projectsStore = useProjectsStore();
 		const requestsStore = useRequestsStore();
diff --git a/src/views/private/_module-bar.vue b/src/views/private/_module-bar.vue
index 54844e2f46..ed44d23ef2 100644
--- a/src/views/private/_module-bar.vue
+++ b/src/views/private/_module-bar.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import ModuleBarLogo from './_module-bar-logo.vue';
 import { useProjectsStore } from '@/stores/projects';
 import { modules } from '@/modules/';
 
-export default createComponent({
+export default defineComponent({
 	components: {
 		ModuleBarLogo
 	},
diff --git a/src/views/private/drawer-detail/drawer-detail.vue b/src/views/private/drawer-detail/drawer-detail.vue
index 1969b66e66..e8fa27672e 100644
--- a/src/views/private/drawer-detail/drawer-detail.vue
+++ b/src/views/private/drawer-detail/drawer-detail.vue
@@ -15,10 +15,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, PropType, computed, ref, Ref, inject } from '@vue/composition-api';
+import { defineComponent, PropType, computed, ref, Ref, inject } from '@vue/composition-api';
 import { useGroupable } from '@/compositions/groupable';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		icon: {
 			type: String,
diff --git a/src/views/private/private-view.vue b/src/views/private/private-view.vue
index aa9f1c7c14..408d6fddff 100644
--- a/src/views/private/private-view.vue
+++ b/src/views/private/private-view.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, computed, watch, provide } from '@vue/composition-api';
+import { defineComponent, ref, computed, watch, provide } from '@vue/composition-api';
 import useWindowSize from '@/compositions/window-size';
 import ModuleBar from './_module-bar.vue';
 import api from '@/api';
@@ -60,7 +60,7 @@ import DrawerDetailGroup from './_drawer-detail-group.vue';
 // Breakpoints:
 // 600, 960, 1260, 1900
 
-export default createComponent({
+export default defineComponent({
 	components: {
 		ModuleBar,
 		DrawerDetailGroup
diff --git a/src/views/public/_logo.vue b/src/views/public/_logo.vue
index 7aa307437a..b1c2f7261c 100644
--- a/src/views/public/_logo.vue
+++ b/src/views/public/_logo.vue
@@ -10,9 +10,9 @@
 
 <script lang="ts">
 import { version } from '../../../package.json';
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		version: {
 			type: String,
diff --git a/src/views/public/public-view.vue b/src/views/public/public-view.vue
index 992500af7f..158c58504d 100644
--- a/src/views/public/public-view.vue
+++ b/src/views/public/public-view.vue
@@ -15,12 +15,12 @@
 
 <script lang="ts">
 import { version } from '../../../package.json';
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import PublicViewLogo from './_logo.vue';
 import { useProjectsStore } from '@/stores/projects/';
 import { ProjectWithKey, ProjectError } from '@/stores/projects/types';
 
-export default createComponent({
+export default defineComponent({
 	components: {
 		PublicViewLogo
 	},
diff --git a/yarn.lock b/yarn.lock
index 167fee0925..e81474df05 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2170,10 +2170,10 @@
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.9.0"
 
-"@vue/composition-api@^0.3.4":
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.3.4.tgz#43d2c3377173cfe1d02e51e3342bcf0fbde9c4b6"
-  integrity sha512-aMbg/pEk0PSQAIFyWWLqbAmaCCTx1kFq+49KZslIBJH9Wqos7eEPLtMv4gGxd/EcciBIgfbtUXaXGg/O3mheRA==
+"@vue/composition-api@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.4.0.tgz#04e600106687de719d587c704296aa4a5b37ca28"
+  integrity sha512-8QxZK3BBbn29vIoiso+UthT6JUbeS0gPBWAxDUK2EComWNHluaGVWXC9fAnUG+L6PM+ApkFE2dOlv5Oi/o+cSQ==
   dependencies:
     tslib "^1.9.3"