Repository: directus/directus
File: app/src/modules/settings/routes/data-model/field-detail/shared/related-collection-select.vue (Vue)

Code before:
<script setup lang="ts">
import { useCollectionsStore } from '@/stores/collections';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

const props = defineProps<{
	modelValue?: string;
	disabled?: boolean;
}>();

defineEmits(['update:modelValue']);

const { t } = useI18n();
const collectionsStore = useCollectionsStore();

const collectionExists = computed(() => {
	return !!collectionsStore.getCollection(props.modelValue);
});

const availableCollections = computed(() => collectionsStore.configuredCollections);
const systemCollections = computed(() => collectionsStore.crudSafeSystemCollections);
</script>

<template>
	<v-input
		key="related-collection-select"
		:model-value="modelValue"
		:class="{ matches: collectionExists }"
		db-safe
		:nullable="false"
		:disabled="disabled"
		:placeholder="t('collection') + '...'"
		@update:model-value="$emit('update:modelValue', $event)"
	>
		<template v-if="!disabled" #append>
			<v-menu show-arrow placement="bottom-end">
				<template #activator="{ toggle }">
					<v-icon v-tooltip="t('select_existing')" name="list_alt" clickable :disabled="disabled" @click="toggle" />
				</template>

				<v-list class="monospace">
					<v-list-item
						v-for="availableCollection in availableCollections"
						:key="availableCollection.collection"
						:active="modelValue === availableCollection.collection"
						:disabled="availableCollection.meta?.singleton"

Review comment (suggestion):
Do you know if these `computed(() => ...)` are needed? They are getters in a pinia store, and I'm not really sure about their reactiveness. So I opted to wrap them in computed, but we had it as non-computed value before. 

Code after:
<script setup lang="ts">
import { useCollectionsStore } from '@/stores/collections';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

const props = defineProps<{
	modelValue?: string;
	disabled?: boolean;
}>();

defineEmits(['update:modelValue']);

const { t } = useI18n();
const collectionsStore = useCollectionsStore();

const collectionExists = computed(() => {
	return !!collectionsStore.getCollection(props.modelValue);
});

const availableCollections = collectionsStore.databaseCollections.filter((collection) => collection.meta);
const systemCollections = collectionsStore.crudSafeSystemCollections;
</script>

<template>
	<v-input
		key="related-collection-select"
		:model-value="modelValue"
		:class="{ matches: collectionExists }"
		db-safe
		:nullable="false"
		:disabled="disabled"
		:placeholder="t('collection') + '...'"
		@update:model-value="$emit('update:modelValue', $event)"
	>
		<template v-if="!disabled" #append>
			<v-menu show-arrow placement="bottom-end">
				<template #activator="{ toggle }">
					<v-icon v-tooltip="t('select_existing')" name="list_alt" clickable :disabled="disabled" @click="toggle" />
				</template>

				<v-list class="monospace">
					<v-list-item
						v-for="availableCollection in availableCollections"
						:key="availableCollection.collection"
						:active="modelValue === availableCollection.collection"
						:disabled="availableCollection.meta?.singleton"