diff --git a/src/settings/PropertyMappingModelComponent.svelte b/src/settings/PropertyMappingModelComponent.svelte
index 0018d75..483854a 100644
--- a/src/settings/PropertyMappingModelComponent.svelte
+++ b/src/settings/PropertyMappingModelComponent.svelte
@@ -1,22 +1,14 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import { PropertyMappingModel, PropertyMappingOption, propertyMappingOptions } from './PropertyMapping';
 	import { capitalizeFirstLetter } from '../utils/Utils';
 	import Icon from './Icon.svelte';
 
-	interface Props {
-		model: PropertyMappingModel;
-		save: (model: PropertyMappingModel) => void;
-	}
+	export let model: PropertyMappingModel;
+	export let save: (model: PropertyMappingModel) => void;
 
-	let { model, save }: Props = $props();
+	let validationResult: { res: boolean; err?: Error } | undefined;
 
-	let validationResult: { res: boolean; err?: Error } | undefined = $state();
-
-	$effect(() => {
-		validationResult = model.validate();
-	});
+	$: validationResult = model.validate();
 </script>
 
 <div class="media-db-plugin-property-mappings-model-container">
diff --git a/src/settings/PropertyMappingModelsComponent.svelte b/src/settings/PropertyMappingModelsComponent.svelte
index 3093af0..dace243 100644
--- a/src/settings/PropertyMappingModelsComponent.svelte
+++ b/src/settings/PropertyMappingModelsComponent.svelte
@@ -2,12 +2,8 @@
 	import { PropertyMappingModel } from './PropertyMapping';
 	import PropertyMappingModelComponent from './PropertyMappingModelComponent.svelte';
 
-	interface Props {
-		models?: PropertyMappingModel[];
-		save: (model: PropertyMappingModel) => void;
-	}
-
-	let { models = [], save }: Props = $props();
+	export let models: PropertyMappingModel[] = [];
+	export let save: (model: PropertyMappingModel) => void;
 </script>
 
 <div class="setting-item" style="display: flex; gap: 10px; flex-direction: column; align-items: stretch;">