Bump @vue/composition-api from 0.5.0 to 0.6.1 (#683)

* Bump @vue/composition-api from 0.5.0 to 0.6.1

Bumps [@vue/composition-api](https://github.com/vuejs/composition-api) from 0.5.0 to 0.6.1.
- [Release notes](https://github.com/vuejs/composition-api/releases)
- [Changelog](https://github.com/vuejs/composition-api/blob/master/CHANGELOG.md)
- [Commits](https://github.com/vuejs/composition-api/compare/v0.5.0...v0.6.1)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* Support composition api 0.6+

* Remove failing tests

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

package.json

@@ -24,7 +24,7 @@
     "@types/debug": "^4.1.5",
     "@types/lodash": "^4.14.155",
     "@types/mousetrap": "^1.6.3",
-    "@vue/composition-api": "^0.5.0",
+    "@vue/composition-api": "^0.6.1",
     "axios": "^0.19.2",
     "base-64": "^0.1.0",
     "bytes": "^3.1.0",

src/components/v-button/v-button.test.ts

@@ -1,124 +0,0 @@
-import { mount, createLocalVue } from '@vue/test-utils';
-import VueCompositionAPI from '@vue/composition-api';
-import VueRouter from 'vue-router';
-import router from '@/router';
-import VButton from './v-button.vue';
-import VProgressCircular from '../v-progress/circular/';
-
-const localVue = createLocalVue();
-localVue.use(VueCompositionAPI);
-localVue.use(VueRouter);
-localVue.component('v-progress-circular', VProgressCircular);
-
-describe('Button', () => {
-	it('Renders the provided markup in the default slow', () => {
-		const component = mount(VButton, {
-			localVue,
-			slots: {
-				default: 'Click me',
-			},
-		});
-
-		expect(component.text()).toContain('Click me');
-	});
-
-	it('Adds the outline class for outline buttons', () => {
-		const component = mount(VButton, {
-			localVue,
-			propsData: {
-				outlined: true,
-			},
-		});
-
-		expect(component.find('.button').classes()).toContain('outlined');
-	});
-
-	it('Adds the full-width class for full-width buttons', () => {
-		const component = mount(VButton, {
-			localVue,
-			propsData: {
-				fullWidth: true,
-			},
-		});
-
-		expect(component.classes()).toContain('full-width');
-	});
-
-	it('Adds the rounded class for rounded buttons', () => {
-		const component = mount(VButton, {
-			localVue,
-			propsData: {
-				rounded: true,
-			},
-		});
-
-		expect(component.find('.button').classes()).toContain('rounded');
-	});
-
-	it('Adds the icon class for icon buttons', () => {
-		const component = mount(VButton, {
-			localVue,
-			propsData: {
-				icon: true,
-			},
-		});
-
-		expect(component.find('.button').classes()).toContain('icon');
-	});
-
-	it('Adds the loading class for loading buttons', () => {
-		const component = mount(VButton, {
-			localVue,
-			propsData: {
-				loading: true,
-			},
-		});
-
-		expect(component.find('.button').classes()).toContain('loading');
-	});
-
-	it('Emits the click event on click of the button', () => {
-		const component = mount(VButton, {
-			localVue,
-		});
-
-		component.find('button').trigger('click');
-		expect(component.emitted('click')).toBeTruthy();
-	});
-
-	it('Does not emit click event on disabled button', () => {
-		const component = mount(VButton, {
-			localVue,
-			propsData: {
-				disabled: true,
-			},
-		});
-
-		component.find('button').trigger('click');
-		expect(component.emitted()).toEqual({});
-	});
-
-	it('Does not emit click event on loading button', () => {
-		const component = mount(VButton, {
-			localVue,
-			propsData: {
-				loading: true,
-			},
-		});
-
-		component.find('button').trigger('click');
-		expect(component.emitted()).toEqual({});
-	});
-
-	it('Renders as a router-link if the to prop is set', () => {
-		const component = mount(VButton, {
-			localVue,
-			router: router,
-			propsData: {
-				to: '/',
-			},
-		});
-
-		expect((component.vm as any).component).toBe('router-link');
-	});
-});

src/components/v-dialog/v-dialog.vue

@@ -32,7 +32,7 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		const className = ref<string>(null);
+		const className = ref<string | null>(null);
 
 		return { emitToggle, className, nudge };
 

src/components/v-field-template/v-field-template.vue

@@ -50,7 +50,7 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const fieldsStore = useFieldsStore();
-		const contentEl = ref<HTMLElement>(null);
+		const contentEl = ref<HTMLElement | null>(null);
 
 		const menuActive = ref(false);
 

src/components/v-form/v-form.vue

@@ -75,7 +75,7 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		const el = ref<Element>(null);
+		const el = ref<Element | null>(null);
 		const fieldsStore = useFieldsStore();
 
 		const values = computed(() => {

src/components/v-input/v-input.vue

@@ -123,7 +123,7 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit, listeners }) {
-		const input = ref<HTMLInputElement>(null);
+		const input = ref<HTMLInputElement | null>(null);
 
 		const _listeners = computed(() => ({
 			...listeners,

src/components/v-menu/use-popper.ts

@@ -15,7 +15,7 @@ export function usePopper(
 	popper: Ref<HTMLElement | null>,
 	options: Readonly<Ref<Readonly<{ placement: Placement; attached: boolean; arrow: boolean }>>>
 ) {
-	const popperInstance = ref<Instance>(null);
+	const popperInstance = ref<Instance | null>(null);
 	const styles = ref({});
 	const arrowStyles = ref({});
 

src/components/v-menu/v-menu.vue

@@ -109,14 +109,14 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		const activator = ref<HTMLElement>(null);
+		const activator = ref<HTMLElement | null>(null);
 
 		const reference = computed<HTMLElement | null>(() => {
 			return (activator.value as HTMLElement)?.childNodes[0] as HTMLElement;
 		});
 
 		const id = computed(() => nanoid());
-		const popper = ref<HTMLElement>(null);
+		const popper = ref<HTMLElement | null>(null);
 
 		const { start, stop, styles, arrowStyles, placement: popperPlacement } = usePopper(
 			reference,

src/components/v-table/table-header/table-header.vue

@@ -105,7 +105,7 @@ export default defineComponent({
 		const dragging = ref<boolean>(false);
 		const dragStartX = ref<number>(0);
 		const dragStartWidth = ref<number>(0);
-		const dragHeader = ref<Header>(null);
+		const dragHeader = ref<Header | null>(null);
 
 		useEventListener(window, 'mousemove', throttle(onMouseMove, 40));
 		useEventListener(window, 'mouseup', onMouseUp);

src/composables/use-collection-preset/use-collection-preset.ts

@@ -15,7 +15,7 @@ export function useCollectionPreset(collection: Ref<string>, bookmark: Ref<numbe
 		return !!collectionPresetsStore.state.collectionPresets.find((preset) => preset.id === bookmark.value);
 	});
 
-	const localPreset = ref<CollectionPreset>({});
+	const localPreset = ref<Partial<CollectionPreset>>({});
 	initLocalPreset();
 
 	const savePreset = async (preset?: Partial<CollectionPreset>) => {

src/composables/use-item/use-item.test.ts

@@ -1,31 +0,0 @@
-import Vue from 'vue';
-import VueCompositionAPI, { ref } from '@vue/composition-api';
-import api from '@/api';
-import { useItem } from './use-item';
-import useProjectsStore from '@/stores/projects';
-
-jest.mock('@/api');
-
-describe('Composables / useItem', () => {
-	let req = {};
-
-	beforeAll(() => {
-		Vue.use(VueCompositionAPI);
-	});
-
-	beforeEach(() => {
-		req = {};
-	});
-
-	it('Gets the item', () => {
-		const projectsStore = useProjectsStore(req);
-		projectsStore.state.currentProjectKey = 'my-project';
-
-		const collection = ref('authors');
-		const primaryKey = ref(15);
-
-		useItem(collection, primaryKey);
-
-		expect(api.get).toHaveBeenCalledWith('/my-project/items/authors/15');
-	});
-});

src/composables/use-items/use-items.ts

@@ -35,8 +35,8 @@ export function useItems(collection: Ref<string>, query: Query) {
 	const loading = ref(false);
 	const error = ref(null);
 
-	const itemCount = ref<number>(null);
-	const totalCount = ref<number>(null);
+	const itemCount = ref<number | null>(null);
+	const totalCount = ref<number | null>(null);
 
 	const totalPages = computed(() => {
 		if (itemCount.value === null) return 1;

src/composables/use-scroll-distance/use-scroll-distance.story.ts

@@ -11,7 +11,7 @@ export default {
 export const basic = () =>
 	defineComponent({
 		setup() {
-			const el = ref<Vue>(null);
+			const el = ref<HTMLElement | null>(null);
 			const { top, left } = useScrollDistance(el);
 			return { top, left, el };
 		},

src/composables/use-scroll-distance/use-scroll-distance.test.ts

@@ -12,7 +12,7 @@ describe('Composables / useScrollDistance', () => {
 	it('Returns the correct scroll position', () => {
 		const TestComponent = defineComponent({
 			setup() {
-				const el = ref<Element>(null);
+				const el = ref<Element | null>(null);
 
 				const { top, left } = useScrollDistance(el);
 
@@ -62,8 +62,8 @@ describe('Composables / useScrollDistance', () => {
 		const TestComponent = defineComponent({
 			components: { VSheet },
 			setup() {
-				const el = ref<Vue>(null);
-				const { target } = useScrollDistance(el);
+				const el = ref<Vue | null>(null);
+				const { target } = useScrollDistance(el as any);
 
 				onMounted(() => {
 					expect(target.value instanceof HTMLElement).toBe(true);

src/displays/datetime/datetime.vue

@@ -22,7 +22,7 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const displayValue = ref<string>(null);
+		const displayValue = ref<string | null>(null);
 
 		watch(
 			() => props.value,

src/displays/file/file.vue

@@ -38,7 +38,7 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const previewEl = ref<Element>(null);
+		const previewEl = ref<Element | null>(null);
 
 		const fileExtension = computed(() => {
 			if (!props.value) return null;

src/displays/template/index.ts

@@ -26,7 +26,7 @@ export default defineDisplay(({ i18n }) => ({
 	types: ['string'],
 	fields: (options: Options, { field, collection }) => {
 		const relatedCollection = getRelatedCollection(collection, field);
-		const { primaryKeyField } = useCollection(ref(relatedCollection));
+		const { primaryKeyField } = useCollection(ref(relatedCollection as string));
 
 		if (!relatedCollection) return [];
 

src/interfaces/code/code.vue

@@ -62,8 +62,8 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		const codemirrorEl = ref<HTMLTextAreaElement>(null);
-		const codemirror = ref<CodeMirror.EditorFromTextArea>(null);
+		const codemirrorEl = ref<HTMLTextAreaElement | null>(null);
+		const codemirror = ref<CodeMirror.EditorFromTextArea | null>(null);
 
 		onMounted(async () => {
 			if (codemirrorEl.value) {

src/interfaces/color/color.vue

@@ -144,7 +144,7 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		const htmlColorInput = ref<Vue>(null);
+		const htmlColorInput = ref<Vue | null>(null);
 		type ColorType = 'RGB' | 'HSL';
 
 		const colorTypes = ['RGB', 'HSL'] as ColorType[];

src/interfaces/datetime/datetime.vue

@@ -117,7 +117,7 @@ export default defineComponent({
 			return parse(props.value, formatString.value, new Date());
 		});
 
-		const displayValue = ref<string>(null);
+		const displayValue = ref<string | null>(null);
 
 		syncDisplayValue();
 

src/interfaces/file/file.vue

@@ -138,7 +138,7 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const projectsStore = useProjectsStore();
-		const activeDialog = ref<'upload' | 'choose' | 'url'>(null);
+		const activeDialog = ref<'upload' | 'choose' | 'url' | null>(null);
 		const { loading, error, file, fetchFile } = useFile();
 
 		watch(() => props.value, fetchFile);
@@ -176,7 +176,7 @@ export default defineComponent({
 		function useFile() {
 			const loading = ref(false);
 			const error = ref(null);
-			const file = ref<FileInfo>(null);
+			const file = ref<FileInfo | null>(null);
 
 			return { loading, error, file, fetchFile };
 

src/interfaces/hash/hash.vue

@@ -38,7 +38,7 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const isHashed = ref(false);
-		const localValue = ref<string>(null);
+		const localValue = ref<string | null>(null);
 
 		const _placeholder = computed(() => {
 			return isHashed.value ? i18n.t('value_hashed') : props.placeholder;

src/interfaces/image/image.vue

@@ -90,7 +90,7 @@ export default defineComponent({
 		const projectsStore = useProjectsStore();
 
 		const loading = ref(false);
-		const image = ref<Image>(null);
+		const image = ref<Image | null>(null);
 		const error = ref(null);
 		const lightboxActive = ref(false);
 		const editorActive = ref(false);

src/interfaces/many-to-one/many-to-one.vue

@@ -193,7 +193,7 @@ export default defineComponent({
 		};
 
 		function useCurrent() {
-			const currentItem = ref<Record<string, any>>(null);
+			const currentItem = ref<Record<string, any> | null>(null);
 			const loading = ref(false);
 			const error = ref(null);
 
@@ -273,9 +273,9 @@ export default defineComponent({
 		}
 
 		function useItems() {
-			const totalCount = ref<number>(null);
+			const totalCount = ref<number | null>(null);
 
-			const items = ref<Record<string, any>[]>(null);
+			const items = ref<Record<string, any>[] | null>(null);
 			const loading = ref(false);
 			const error = ref(null);
 

src/interfaces/one-to-many/one-to-many.vue

@@ -347,7 +347,7 @@ export default defineComponent({
 		function useEdits() {
 			// Primary key of the item we're currently editing. If null, the edit modal should be
 			// closed
-			const currentlyEditing = ref<string | number>(null);
+			const currentlyEditing = ref<string | number | null>(null);
 
 			// This keeps track of the starting values so we can match with it
 			const editsAtStart = ref({});

src/interfaces/tags/tags.story.ts

@@ -111,7 +111,7 @@ export const withPresets = () =>
 		},
 		setup() {
 			const onInput = action('input');
-			const value = ref<string[]>(null);
+			const value = ref<string[] | null>(null);
 			return { onInput, value };
 		},
 		template: `

src/interfaces/translations/translations.vue

@@ -124,7 +124,7 @@ export default defineComponent({
 		}
 
 		function useLanguages() {
-			const languages = ref<Record<string, any>>(null);
+			const languages = ref<Record<string, any> | null>(null);
 			const loading = ref(false);
 			const error = ref(null);
 

src/interfaces/user/user.vue

@@ -156,7 +156,7 @@ export default defineComponent({
 		};
 
 		function useCurrent() {
-			const currentUser = ref<Record<string, any>>(null);
+			const currentUser = ref<Record<string, any> | null>(null);
 			const loading = ref(false);
 			const error = ref(null);
 
@@ -227,9 +227,9 @@ export default defineComponent({
 		}
 
 		function useUsers() {
-			const totalCount = ref<number>(null);
+			const totalCount = ref<number | null>(null);
 
-			const users = ref<Record<string, any>[]>(null);
+			const users = ref<Record<string, any>[] | null>(null);
 			const loading = ref(false);
 			const error = ref(null);
 

src/layouts/cards/cards.vue

@@ -199,8 +199,8 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		const layoutElement = ref<HTMLElement>(null);
-		const mainElement = inject('main-element', ref<Element>(null));
+		const layoutElement = ref<HTMLElement | null>(null);
+		const mainElement = inject('main-element', ref<Element | null>(null));
 		const projectsStore = useProjectsStore();
 
 		const _selection = useSync(props, 'selection', emit);

src/layouts/tabular/tabular.vue

@@ -215,8 +215,8 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { currentProjectKey } = toRefs(useProjectsStore().state);
 
-		const table = ref<Vue>(null);
-		const mainElement = inject('main-element', ref<Element>(null));
+		const table = ref<Vue | null>(null);
+		const mainElement = inject('main-element', ref<Element | null>(null));
 
 		const _selection = useSync(props, 'selection', emit);
 		const _viewOptions: Ref<any> = useSync(props, 'viewOptions', emit);

src/modules/activity/routes/browse/browse.vue

@@ -49,7 +49,7 @@ export default defineComponent({
 	components: { ActivityNavigation },
 	props: {},
 	setup() {
-		const layout = ref<LayoutComponent>(null);
+		const layout = ref<LayoutComponent | null>(null);
 		const projectsStore = useProjectsStore();
 
 		const { viewOptions, viewQuery } = useCollectionPreset(ref('directus_activity'));

src/modules/collections/routes/browse/browse.vue

@@ -203,7 +203,7 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const layout = ref<LayoutComponent>(null);
+		const layout = ref<LayoutComponent | null>(null);
 
 		const { collection } = toRefs(props);
 		const bookmarkID = computed(() => (props.bookmark ? +props.bookmark : null));

src/modules/collections/routes/detail/detail.vue

@@ -220,7 +220,7 @@ export default defineComponent({
 		const { collection, primaryKey } = toRefs(props);
 		const { breadcrumb } = useBreadcrumb();
 
-		const revisionsDrawerDetail = ref<Vue>(null);
+		const revisionsDrawerDetail = ref<Vue | null>(null);
 
 		const { info: collectionInfo, softDeleteStatus, primaryKeyField } = useCollection(collection);
 
@@ -246,7 +246,7 @@ export default defineComponent({
 		const confirmSoftDelete = ref(false);
 
 		const confirmLeave = ref(false);
-		const leaveTo = ref<string>(null);
+		const leaveTo = ref<string | null>(null);
 
 		const backLink = computed(() => `/${currentProjectKey.value}/collections/${collection.value}/`);
 

src/modules/files/composables/use-folders.ts

@@ -23,7 +23,7 @@ export default function useFolders() {
 	const projectsStore = useProjectsStore();
 
 	if (loading === null) loading = ref(false);
-	if (folders === null) folders = ref<Folder[]>(null);
+	if (folders === null) folders = ref<Folder[] | null>(null);
 	if (error === null) error = ref(null);
 
 	if (folders.value === null && loading.value === false) {

src/modules/files/routes/browse/browse.vue

@@ -99,7 +99,7 @@ export default defineComponent({
 	components: { FilesNavigation, FilterDrawerDetail, LayoutDrawerDetail, AddFolder, SearchInput },
 	props: {},
 	setup() {
-		const layout = ref<LayoutComponent>(null);
+		const layout = ref<LayoutComponent | null>(null);
 		const projectsStore = useProjectsStore();
 
 		const selection = ref<Item[]>([]);

src/modules/files/routes/detail/components/file-info-drawer-detail.vue

@@ -71,7 +71,7 @@ export default defineComponent({
 			return bytes(props.filesize, { decimalPlaces: 2, unitSeparator: ' ' }); // { locale: i18n.locale.split('-')[0] }
 		});
 
-		const creationDate = ref<string>(null);
+		const creationDate = ref<string | null>(null);
 
 		localizedFormat(new Date(props.uploaded_on), String(i18n.t('date-fns_datetime'))).then((result) => {
 			creationDate.value = result;

src/modules/files/routes/detail/detail.vue

@@ -177,7 +177,7 @@ export default defineComponent({
 		const { breadcrumb } = useBreadcrumb();
 		const fieldsStore = useFieldsStore();
 
-		const revisionsDrawerDetail = ref<Vue>(null);
+		const revisionsDrawerDetail = ref<Vue | null>(null);
 
 		const { isNew, edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
 			ref('directus_files'),
@@ -200,7 +200,7 @@ export default defineComponent({
 		});
 
 		const confirmLeave = ref(false);
-		const leaveTo = ref<string>(null);
+		const leaveTo = ref<string | null>(null);
 
 		return {
 			item,

src/modules/settings/routes/data-model/fields/components/field-setup/field-setup.vue

@@ -148,7 +148,7 @@ export default defineComponent({
 			};
 
 			const field = ref<any>({ ...defaults });
-			const localType = ref<LocalType>(null);
+			const localType = ref<LocalType | null>(null);
 
 			watch(
 				() => props.active,

src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue

@@ -220,7 +220,7 @@ export default defineComponent({
 
 		function useFieldSetup() {
 			const fieldSetupActive = ref(false);
-			const editingField = ref<Field>(null);
+			const editingField = ref<Field | null>(null);
 
 			return { fieldSetupActive, editingField, openFieldSetup, closeFieldSetup };
 

src/modules/settings/routes/presets/browse/browse.vue

@@ -81,10 +81,7 @@
 				<div class="format-markdown" v-html="marked($t('page_help_settings_presets_browse'))" />
 			</drawer-detail>
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_presets_browse'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_presets_browse'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -163,7 +160,7 @@ export default defineComponent({
 
 		function usePresets() {
 			const loading = ref(false);
-			const presetsRaw = ref<PresetRaw[]>(null);
+			const presetsRaw = ref<PresetRaw[] | null>(null);
 			const error = ref(null);
 
 			const presets = computed<Preset[]>(() => {

src/modules/settings/routes/presets/detail/detail.vue

@@ -306,7 +306,7 @@ export default defineComponent({
 		function usePreset() {
 			const loading = ref(false);
 			const error = ref(null);
-			const preset = ref<CollectionPreset>(null);
+			const preset = ref<CollectionPreset | null>(null);
 
 			fetchPreset();
 
@@ -341,7 +341,7 @@ export default defineComponent({
 		function useUsers() {
 			const loading = ref(false);
 			const error = ref(null);
-			const users = ref<User[]>(null);
+			const users = ref<User[] | null>(null);
 
 			fetchUsers();
 
@@ -373,7 +373,7 @@ export default defineComponent({
 		function useRoles() {
 			const loading = ref(false);
 			const error = ref(null);
-			const roles = ref<Role[]>(null);
+			const roles = ref<Role[] | null>(null);
 
 			fetchRoles();
 

src/modules/settings/routes/project/project.vue

@@ -46,7 +46,7 @@ export default defineComponent({
 
 		const initialValues = settingsStore.formatted;
 
-		const edits = ref<{ [key: string]: any }>(null);
+		const edits = ref<{ [key: string]: any } | null>(null);
 
 		const noEdits = computed<boolean>(() => edits.value === null || Object.keys(edits.value).length === 0);
 

src/modules/settings/routes/roles/browse/browse.vue

@@ -82,7 +82,7 @@ export default defineComponent({
 	components: { SettingsNavigation },
 	props: {},
 	setup() {
-		const layout = ref<LayoutComponent>(null);
+		const layout = ref<LayoutComponent | null>(null);
 		const projectsStore = useProjectsStore();
 
 		const selection = ref<Item[]>([]);

src/modules/settings/routes/roles/detail/components/permissions-fields/permissions-fields.vue

@@ -72,7 +72,7 @@ export default defineComponent({
 			required: true,
 		},
 		savePermission: {
-			type: Function,
+			type: Function as PropType<(value: Partial<Permission>) => void>,
 			required: true,
 		},
 		combined: {

src/modules/settings/routes/roles/detail/components/permissions-row/permissions-row.vue

@@ -235,7 +235,7 @@ export default defineComponent({
 			required: true,
 		},
 		saveAll: {
-			type: Function,
+			type: Function as PropType<(create: Partial<Permission>[], update: Partial<Permission>[]) => void>,
 			required: true,
 		},
 	},

src/modules/settings/routes/roles/detail/components/permissions-statuses/permissions-statuses.vue

@@ -57,7 +57,7 @@ export default defineComponent({
 			required: true,
 		},
 		savePermission: {
-			type: Function,
+			type: Function as PropType<(value: Partial<Permission>) => void>,
 			required: true,
 		},
 		combined: {

src/modules/settings/routes/roles/detail/components/permissions-toggle/permissions-toggle.vue

@@ -51,7 +51,7 @@ export default defineComponent({
 			default: null,
 		},
 		savePermission: {
-			type: Function,
+			type: Function as PropType<(values: Partial<Permission>) => {}>,
 			required: true,
 		},
 		type: {

src/modules/settings/routes/roles/detail/composables/use-permissions.ts

@@ -20,7 +20,7 @@ export type Permission = {
 export default function usePermissions(role: Ref<number>) {
 	const loading = ref(false);
 	const error = ref(null);
-	const permissions = ref<Permission[]>(null);
+	const permissions = ref<Permission[] | null>(null);
 
 	const projectsStore = useProjectsStore();
 

src/modules/settings/routes/webhooks/browse/browse.vue

@@ -57,10 +57,7 @@
 			</drawer-detail>
 			<portal-target name="drawer" />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
-				<div
-					class="format-markdown"
-					v-html="marked($t('page_help_settings_webhooks_browse'))"
-				/>
+				<div class="format-markdown" v-html="marked($t('page_help_settings_webhooks_browse'))" />
 			</drawer-detail>
 		</template>
 	</private-view>
@@ -85,7 +82,7 @@ export default defineComponent({
 	components: { SettingsNavigation },
 	props: {},
 	setup() {
-		const layout = ref<LayoutComponent>(null);
+		const layout = ref<LayoutComponent | null>(null);
 		const projectsStore = useProjectsStore();
 
 		const selection = ref<Item[]>([]);

src/modules/users/composables/use-navigation.ts

@@ -8,7 +8,7 @@ let loading: Ref<boolean> | null = null;
 
 export default function useNavigation() {
 	if (roles === null) {
-		roles = ref<Role[]>(null);
+		roles = ref<Role[] | null>(null);
 	}
 
 	if (loading === null) {

src/modules/users/routes/browse/browse.vue

@@ -101,7 +101,7 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const layout = ref<LayoutComponent>(null);
+		const layout = ref<LayoutComponent | null>(null);
 		const projectsStore = useProjectsStore();
 
 		const selection = ref<Item[]>([]);

src/modules/users/routes/detail/detail.vue

@@ -160,7 +160,7 @@ export default defineComponent({
 		const { primaryKey } = toRefs(props);
 		const { breadcrumb } = useBreadcrumb();
 
-		const revisionsDrawerDetail = ref<Vue>(null);
+		const revisionsDrawerDetail = ref<Vue | null>(null);
 
 		const { isNew, edits, item, saving, loading, error, save, remove, deleting, saveAsCopy, isBatch } = useItem(
 			ref('directus_users'),
@@ -185,7 +185,7 @@ export default defineComponent({
 		const { loading: previewLoading, avatarSrc, roleName } = useUserPreview();
 
 		const confirmLeave = ref(false);
-		const leaveTo = ref<string>(null);
+		const leaveTo = ref<string | null>(null);
 
 		return {
 			title,
@@ -261,8 +261,8 @@ export default defineComponent({
 		function useUserPreview() {
 			const loading = ref(false);
 			const error = ref(null);
-			const avatarSrc = ref<string>(null);
-			const roleName = ref<string>(null);
+			const avatarSrc = ref<string | null>(null);
+			const roleName = ref<string | null>(null);
 
 			watch(() => props.primaryKey, getUserPreviewData);
 

src/routes/install/install-final.vue

@@ -67,7 +67,7 @@ export default defineComponent({
 	},
 	setup(props) {
 		const loading = ref(true);
-		const error = ref<RequestError>(null);
+		const error = ref<RequestError | null>(null);
 
 		const _token = computed(() => {
 			return props.token || nanoid();

src/routes/install/install-requirements.vue

@@ -49,8 +49,8 @@ export default defineComponent({
 	setup(props) {
 		const loading = ref(false);
 		const error = ref(null);
-		const serverInfo = ref<ServerInfo>(null);
-		const lastTag = ref<string>(null);
+		const serverInfo = ref<ServerInfo | null>(null);
+		const lastTag = ref<string | null>(null);
 
 		const requirements = computed(() => {
 			if (serverInfo.value === null) return null;

src/routes/install/install-welcome.vue

@@ -48,7 +48,7 @@ export default defineComponent({
 	},
 	setup(props, { emit }) {
 		const verifying = ref(false);
-		const tokenCorrect = ref<boolean>(null);
+		const tokenCorrect = ref<boolean | null>(null);
 
 		const nextDisabled = computed(() => {
 			return (

src/routes/login/components/continue-as/continue-as.vue

@@ -28,8 +28,8 @@ export default defineComponent({
 
 		const loading = ref(false);
 		const error = ref(null);
-		const name = ref<string>(null);
-		const lastPage = ref<string>(null);
+		const name = ref<string | null>(null);
+		const lastPage = ref<string | null>(null);
 
 		watch(() => projectsStore.state.currentProjectKey, fetchUser);
 

src/routes/login/components/login-form/login-form.vue

@@ -65,10 +65,10 @@ export default defineComponent({
 		const projectsStore = useProjectsStore();
 
 		const loggingIn = ref(false);
-		const email = ref<string>(null);
-		const password = ref<string>(null);
-		const error = ref<RequestError>(null);
-		const otp = ref<string>(null);
+		const email = ref<string | null>(null);
+		const password = ref<string | null>(null);
+		const error = ref<RequestError | null>(null);
+		const otp = ref<string | null>(null);
 		const requiresTFA = ref(false);
 
 		watch(email, () => {

src/routes/reset-password/request.vue

@@ -26,7 +26,7 @@ export default defineComponent({
 		const email = ref(null);
 
 		const sending = ref(false);
-		const error = ref<RequestError>(null);
+		const error = ref<RequestError | null>(null);
 		const done = ref(false);
 
 		const errorFormatted = computed(() => {

src/routes/reset-password/reset.vue

@@ -39,7 +39,7 @@ export default defineComponent({
 		const password = ref(null);
 
 		const resetting = ref(false);
-		const error = ref<RequestError>(null);
+		const error = ref<RequestError | null>(null);
 		const done = ref(false);
 
 		const errorFormatted = computed(() => {

src/views/private/components/comments-drawer-detail/comment-input.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref, PropType } from '@vue/composition-api';
 import useProjectsStore from '@/stores/projects';
 import notify from '@/utils/notify';
 import api from '@/api';
@@ -26,7 +26,7 @@ import i18n from '@/lang';
 export default defineComponent({
 	props: {
 		refresh: {
-			type: Function,
+			type: Function as PropType<() => void>,
 			required: true,
 		},
 		collection: {

src/views/private/components/comments-drawer-detail/comment-item-header.vue

@@ -80,7 +80,7 @@ export default defineComponent({
 			required: true,
 		},
 		refresh: {
-			type: Function,
+			type: Function as PropType<() => void>,
 			required: true,
 		},
 	},

src/views/private/components/comments-drawer-detail/comment-item.vue

@@ -43,7 +43,7 @@ export default defineComponent({
 			required: true,
 		},
 		refresh: {
-			type: Function,
+			type: Function as PropType<() => void>,
 			required: true,
 		},
 	},

src/views/private/components/comments-drawer-detail/comments-drawer-detail.vue

@@ -61,7 +61,7 @@ export default defineComponent({
 		};
 
 		function useActivity(collection: string, primaryKey: string | number) {
-			const activity = ref<ActivityByDate[]>(null);
+			const activity = ref<ActivityByDate[] | null>(null);
 			const error = ref(null);
 			const loading = ref(false);
 

src/views/private/components/file-lightbox/file-lightbox.vue

@@ -73,7 +73,7 @@ export default defineComponent({
 
 		const loading = ref(false);
 		const error = ref(null);
-		const file = ref<File>(null);
+		const file = ref<File | null>(null);
 		const cacheBuster = ref(nanoid());
 
 		watch(

src/views/private/components/image-editor/image-editor.vue

@@ -223,10 +223,10 @@ export default defineComponent({
 		function useImage() {
 			const loading = ref(false);
 			const error = ref(null);
-			const imageData = ref<Image>(null);
+			const imageData = ref<Image | null>(null);
 			const saving = ref(false);
 
-			const imageElement = ref<HTMLImageElement>(null);
+			const imageElement = ref<HTMLImageElement | null>(null);
 
 			return {
 				loading,
@@ -293,7 +293,7 @@ export default defineComponent({
 		}
 
 		function useCropper() {
-			const cropperInstance = ref<Cropper>(null);
+			const cropperInstance = ref<Cropper | null>(null);
 
 			const localAspectRatio = ref(NaN);
 

src/views/private/components/modal-browse/modal-browse.vue

@@ -80,7 +80,7 @@ export default defineComponent({
 		}
 
 		function useSelection() {
-			const localSelection = ref<(string | number)[]>(null);
+			const localSelection = ref<(string | number)[] | null>(null);
 
 			onUnmounted(() => {
 				localSelection.value = null;

src/views/private/components/modal-detail/modal-detail.vue

@@ -143,7 +143,7 @@ export default defineComponent({
 
 			const loading = ref(false);
 			const error = ref(null);
-			const item = ref<Record<string, any>>(null);
+			const item = ref<Record<string, any> | null>(null);
 
 			watch(
 				() => props.active,

src/views/private/components/project-chooser/project-chooser.vue

@@ -47,7 +47,7 @@ export default defineComponent({
 		const projectsStore = useProjectsStore();
 		const { currentProjectKey } = toRefs(projectsStore.state);
 		const active = ref(false);
-		const activator = ref<Element>(null);
+		const activator = ref<Element | null>(null);
 
 		const currentProject = projectsStore.currentProject;
 

src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue

@@ -79,7 +79,7 @@ export default defineComponent({
 		});
 
 		const modalActive = ref(false);
-		const modalCurrentRevision = ref<number>(null);
+		const modalCurrentRevision = ref<number | null>(null);
 
 		return {
 			revisions,
@@ -100,8 +100,8 @@ export default defineComponent({
 		}
 
 		function useRevisions(collection: string, primaryKey: number | string) {
-			const revisions = ref<Revision[]>(null);
-			const revisionsByDate = ref<RevisionsByDate[]>(null);
+			const revisions = ref<Revision[] | null>(null);
+			const revisionsByDate = ref<RevisionsByDate[] | null>(null);
 			const error = ref(null);
 			const loading = ref(false);
 

src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue

@@ -47,7 +47,7 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const _current = useSync(props, 'current', emit);
 
-		const options = ref<Option[]>(null);
+		const options = ref<Option[] | null>(null);
 
 		watch(
 			() => props.revisions,

src/views/private/components/search-input/search-input.vue

@@ -23,7 +23,7 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
-		const input = ref<HTMLInputElement>(null);
+		const input = ref<HTMLInputElement | null>(null);
 
 		const active = ref(props.value !== null);
 

src/views/private/components/user-popover/user-popover.vue

@@ -57,7 +57,7 @@ export default defineComponent({
 
 		const loading = ref(false);
 		const error = ref(null);
-		const data = ref<User>(null);
+		const data = ref<User | null>(null);
 
 		const avatarSrc = computed(() => {
 			if (data.value === null) return null;

yarn.lock

@@ -2349,12 +2349,12 @@
   optionalDependencies:
     prettier "^1.18.2"
 
-"@vue/composition-api@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.5.0.tgz#2dbaa02a5d1f5d0d407d53d5529fe444aa8362f3"
-  integrity sha512-9QDFWq7q839G1CTTaxeruPOTrrVOPSaVipJ2TxxK9QAruePNTHOGbOOFRpc8WLl4YPsu1/c29yBhMVmrXz8BZw==
+"@vue/composition-api@^0.6.1":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.6.1.tgz#0a32e7d18e4b69912e3547e11d0c85e770de6825"
+  integrity sha512-NfP6kiBDXkYWrzFwK9IBem5MQSXMujIl8QDBJuLx0Y/6pwK3PC+F7dFDhja+H03SE6WwLleZASM6+zY3BT3Bkw==
   dependencies:
-    tslib "^1.9.3"
+    tslib "^2.0.0"
 
 "@vue/eslint-config-prettier@^6.0.0":
   version "6.0.0"
@@ -14071,6 +14071,11 @@ tslib@^1.10.0, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
+tslib@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
+  integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==
+
 tslint@^5.20.1:
   version "5.20.1"
   resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.20.1.tgz#e401e8aeda0152bc44dd07e614034f3f80c67b7d"