Repository: directus/directus
File: app/src/interfaces/_system/system-filter/input-group.vue (Vue)

Code before:
import { FieldFilter } from '@directus/types';
import { clone, get } from 'lodash';
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import InputComponent from './input-component.vue';
import { fieldToFilter, getComparator, getField } from './utils';
import { useCollection } from '@directus/composables';

const props = defineProps<{
	field: FieldFilter;
	collection: string;
}>();

const emit = defineEmits<{
	(e: 'update:field', value: FieldFilter): void;
}>();

const fieldsStore = useFieldsStore();
const relationsStore = useRelationsStore();
const { t } = useI18n();

const { info: collectionInfo } = useCollection(computed(() => props.collection));

const versioningEnabled = computed(() => collectionInfo.value?.meta?.versioning ?? false);

const { fakeVersionField } = useFakeVersionField(
	computed(() => props.collection),
	ref(true),
	versioningEnabled,
);

const fieldInfo = computed(() => {
	const field = getField(props.field);

	if (field === '$version') {
		return fakeVersionField.value;
	}

	const fieldInfo = fieldsStore.getField(props.collection, field);

	// Alias uses the foreign key type
	if (fieldInfo?.type === 'alias') {
		const relations = relationsStore.getRelationsForField(props.collection, field);

		if (relations[0]) {
			return fieldsStore.getField(relations[0].collection, relations[0].field);
		}
	}

	return fieldInfo;
});

Review comment (suggestion):
Use `toRef` instead of `computed` and set `includeChoices` parameter to `true`.

```suggestion
const { fakeVersionField } = useFakeVersionField(toRef(props, 'collection'), ref(true), versioningEnabled, true);
```

Code after:
import { FieldFilter } from '@directus/types';
import { clone, get } from 'lodash';
import { computed, toRef } from 'vue';
import { useI18n } from 'vue-i18n';
import InputComponent from './input-component.vue';
import { fieldToFilter, getComparator, getField } from './utils';
import { useCollection } from '@directus/composables';

const props = defineProps<{
	field: FieldFilter;
	collection: string;
}>();

const emit = defineEmits<{
	(e: 'update:field', value: FieldFilter): void;
}>();

const fieldsStore = useFieldsStore();
const relationsStore = useRelationsStore();
const { t } = useI18n();

const field = computed(() => getField(props.field));
const isVersionField = computed(() => field.value === '$version');

const { info: collectionInfo } = useCollection(computed(() => props.collection));
const versioningEnabled = computed(() => !!collectionInfo.value?.meta?.versioning && isVersionField.value);
const { fakeVersionField } = useFakeVersionField(toRef(props, 'collection'), versioningEnabled, isVersionField);

const fieldInfo = computed(() => {
	if (isVersionField.value) {
		return fakeVersionField.value;
	}

	const fieldInfo = fieldsStore.getField(props.collection, field.value);

	// Alias uses the foreign key type
	if (fieldInfo?.type === 'alias') {
		const relations = relationsStore.getRelationsForField(props.collection, field.value);

		if (relations[0]) {
			return fieldsStore.getField(relations[0].collection, relations[0].field);
		}
	}

	return fieldInfo;
});

const comparator = computed(() => {
	return getComparator(props.field);
});