diff --git a/pages/devices/_deviceId/properties.vue b/pages/devices/_deviceId/properties.vue
index 00a14c57e121784f20196a1bbe0167edea23c168..75b09a0926a091cb619a21bc7e6e09861f3ccf8a 100644
--- a/pages/devices/_deviceId/properties.vue
+++ b/pages/devices/_deviceId/properties.vue
@@ -21,17 +21,22 @@
       multiple
     >
       <template
-        v-for="(field, index) in properties"
+        v-for="(field, index) in deviceProperties"
       >
         <NuxtChild
           :key="'property-' + index"
-          v-model="properties[index]"
+          v-model="deviceProperties[index]"
+          :compartments="compartments"
+          :sampling-medias="samplingMedias"
+          :properties="properties"
+          :units="units"
+          :measured-quantity-units="measuredQuantityUnits"
           @delete="deleteProperty"
         />
       </template>
     </v-expansion-panels>
     <v-card-actions
-      v-if="properties.length > 3"
+      v-if="deviceProperties.length > 3"
     >
       <v-spacer />
       <v-btn
@@ -48,8 +53,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
+import { Component, Vue, Watch } from 'nuxt-property-decorator'
 import { DeviceProperty } from '@/models/DeviceProperty'
+import { Compartment } from '@/models/Compartment'
+import { Property } from '@/models/Property'
+import { SamplingMedia } from '@/models/SamplingMedia'
+import { Unit } from '@/models/Unit'
+import { MeasuredQuantityUnit } from '@/models/MeasuredQuantityUnit'
 
 import ProgressIndicator from '@/components/ProgressIndicator.vue'
 
@@ -60,20 +70,51 @@ import ProgressIndicator from '@/components/ProgressIndicator.vue'
 })
 export default class DevicePropertiesPage extends Vue {
   private openedPanels: number[] = []
-  private properties: DeviceProperty[] = []
+  private deviceProperties: DeviceProperty[] = []
   private isLoading = false
   private isSaving = false
 
+  private compartments: Compartment[] = []
+  private samplingMedias: SamplingMedia[] = []
+  private properties: Property[] = []
+  private units: Unit[] = []
+  private measuredQuantityUnits: MeasuredQuantityUnit[] = []
+
   mounted () {
     this.isLoading = true
     this.$api.devices.findRelatedDeviceProperties(this.deviceId).then((foundProperties) => {
-      this.properties = foundProperties
+      this.deviceProperties = foundProperties
       this.isLoading = false
       this.openSelectedPanel()
     }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Failed to fetch custom fields')
+      this.$store.commit('snackbar/setError', 'Failed to fetch properties')
       this.isLoading = false
     })
+    this.$api.compartments.findAllPaginated().then((foundCompartments) => {
+      this.compartments = foundCompartments
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of compartments failed')
+    })
+    this.$api.samplingMedia.findAllPaginated().then((foundSamplingMedias) => {
+      this.samplingMedias = foundSamplingMedias
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of sampling medias failed')
+    })
+    this.$api.properties.findAllPaginated().then((foundProperties) => {
+      this.properties = foundProperties
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of properties failed')
+    })
+    this.$api.units.findAllPaginated().then((foundUnits) => {
+      this.units = foundUnits
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of units failed')
+    })
+    this.$api.measuredQuantityUnits.findAllPaginated().then((foundUnits) => {
+      this.measuredQuantityUnits = foundUnits
+    }).catch(() => {
+      this.$store.commit('snackbar/setError', 'Loading of measuredquantityunits failed')
+    })
   }
 
   get isInProgress (): boolean {
@@ -106,14 +147,17 @@ export default class DevicePropertiesPage extends Vue {
 
   openSelectedPanel (): void {
     const propertyId = this.getPropertyIdFromUrl()
+    console.log('propertyId by URL is', propertyId)
     if (!propertyId) {
+      Vue.set(this, 'openedPanels', [])
       return
     }
-    const propertyIndex: number = this.properties.findIndex((prop: DeviceProperty) => prop.id === propertyId)
+    const propertyIndex: number = this.deviceProperties.findIndex((prop: DeviceProperty) => prop.id === propertyId)
+    console.log('propertyIndex is', propertyIndex)
     if (propertyIndex === -1) {
       return
     }
-    this.openedPanels = [propertyIndex]
+    Vue.set(this, 'openedPanels', [propertyIndex])
   }
 
   addProperty (): void {
@@ -121,5 +165,12 @@ export default class DevicePropertiesPage extends Vue {
 
   deleteProperty (property: DeviceProperty) {
   }
+
+  @Watch('$route', { immediate: true, deep: true })
+  // @ts-ignore
+  onRouteChanged () {
+    this.openSelectedPanel()
+    console.log('route changed', this.openedPanels)
+  }
 }
 </script>
diff --git a/pages/devices/_deviceId/properties/_propertyId.vue b/pages/devices/_deviceId/properties/_propertyId.vue
index 34d2d8867ea4bf2bdae016b000b9c1e9d53ebdb4..8979294f7d223a6c0619b16c0a4f2bd7f317f2a7 100644
--- a/pages/devices/_deviceId/properties/_propertyId.vue
+++ b/pages/devices/_deviceId/properties/_propertyId.vue
@@ -3,6 +3,11 @@
     <NuxtChild
       v-if="isEditModeForProperty"
       v-model="property"
+      :compartments="compartments"
+      :sampling-medias="samplingMedias"
+      :properties="properties"
+      :units="units"
+      :measured-quantity-units="measuredQuantityUnits"
     />
     <DevicePropertyExpansionPanel
       v-else
@@ -42,44 +47,68 @@ import DevicePropertyInfo from '@/components/DevicePropertyInfo.vue'
   }
 })
 export default class DevicePropertyIdPage extends Vue {
-  private compartments: Compartment[] = []
-  private samplingMedias: SamplingMedia[] = []
-  private properties: Property[] = []
-  private units: Unit[] = []
-  private measuredQuantityUnits: MeasuredQuantityUnit[] = []
-
   @Prop({
     required: true,
     type: Object
   })
   readonly value!: DeviceProperty
 
+  /**
+   * a list of compartments
+   */
+  @Prop({
+    default: () => [] as Compartment[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly compartments!: Compartment[]
+
+  /**
+   * a list of samplingMedias
+   */
+  @Prop({
+    default: () => [] as SamplingMedia[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly samplingMedias!: SamplingMedia[]
+
+  /**
+   * a list of properties
+   */
+  @Prop({
+    default: () => [] as Property[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly properties!: Property[]
+
+  /**
+   * a list of units
+   */
+  @Prop({
+    default: () => [] as Unit[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly units!: Unit[]
+
+  /**
+   * a list of measuredQuantityUnits
+   */
+  @Prop({
+    default: () => [] as MeasuredQuantityUnit[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly measuredQuantityUnits!: MeasuredQuantityUnit[]
+
   mounted () {
-    this.$api.compartments.findAllPaginated().then((foundCompartments) => {
-      this.compartments = foundCompartments
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of compartments failed')
-    })
-    this.$api.samplingMedia.findAllPaginated().then((foundSamplingMedias) => {
-      this.samplingMedias = foundSamplingMedias
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of sampling medias failed')
-    })
-    this.$api.properties.findAllPaginated().then((foundProperties) => {
-      this.properties = foundProperties
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of properties failed')
-    })
-    this.$api.units.findAllPaginated().then((foundUnits) => {
-      this.units = foundUnits
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of units failed')
-    })
-    this.$api.measuredQuantityUnits.findAllPaginated().then((foundUnits) => {
-      this.measuredQuantityUnits = foundUnits
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of measuredquantityunits failed')
-    })
   }
 
   get property (): DeviceProperty {
diff --git a/pages/devices/_deviceId/properties/_propertyId/edit.vue b/pages/devices/_deviceId/properties/_propertyId/edit.vue
index 68371784f34188fb8190277f3be0cb06154811b3..eeceb4413338cc4a43d510e7ee448bb49218b7b4 100644
--- a/pages/devices/_deviceId/properties/_propertyId/edit.vue
+++ b/pages/devices/_deviceId/properties/_propertyId/edit.vue
@@ -57,48 +57,72 @@ export default class DeviceCustomFieldsShowPage extends Vue {
   private isSaving: boolean = false
   private valueCopy: DeviceProperty = new DeviceProperty()
 
-  private compartments: Compartment[] = []
-  private samplingMedias: SamplingMedia[] = []
-  private properties: Property[] = []
-  private units: Unit[] = []
-  private measuredQuantityUnits: MeasuredQuantityUnit[] = []
-
   @Prop({
     required: true,
     type: Object
   })
   readonly value!: DeviceProperty
 
+  /**
+   * a list of compartments
+   */
+  @Prop({
+    default: () => [] as Compartment[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly compartments!: Compartment[]
+
+  /**
+   * a list of samplingMedias
+   */
+  @Prop({
+    default: () => [] as SamplingMedia[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly samplingMedias!: SamplingMedia[]
+
+  /**
+   * a list of properties
+   */
+  @Prop({
+    default: () => [] as Property[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly properties!: Property[]
+
+  /**
+   * a list of units
+   */
+  @Prop({
+    default: () => [] as Unit[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly units!: Unit[]
+
+  /**
+   * a list of measuredQuantityUnits
+   */
+  @Prop({
+    default: () => [] as MeasuredQuantityUnit[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly measuredQuantityUnits!: MeasuredQuantityUnit[]
+
   created () {
     this.valueCopy = DeviceProperty.createFromObject(this.value)
   }
 
   mounted () {
-    this.$api.compartments.findAllPaginated().then((foundCompartments) => {
-      this.compartments = foundCompartments
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of compartments failed')
-    })
-    this.$api.samplingMedia.findAllPaginated().then((foundSamplingMedias) => {
-      this.samplingMedias = foundSamplingMedias
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of sampling medias failed')
-    })
-    this.$api.properties.findAllPaginated().then((foundProperties) => {
-      this.properties = foundProperties
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of properties failed')
-    })
-    this.$api.units.findAllPaginated().then((foundUnits) => {
-      this.units = foundUnits
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of units failed')
-    })
-    this.$api.measuredQuantityUnits.findAllPaginated().then((foundUnits) => {
-      this.measuredQuantityUnits = foundUnits
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of measuredquantityunits failed')
-    });
     //(this.$refs.devicePropertyForm as Vue & { focus: () => void}).focus()
   }
 
diff --git a/pages/devices/_deviceId/properties/index.vue b/pages/devices/_deviceId/properties/index.vue
index cf34b1f69071410bba3fe8a04f52d731ad3301dc..14fe2e0a49a2557c9c1daa4c2b8b01e511fdaf23 100644
--- a/pages/devices/_deviceId/properties/index.vue
+++ b/pages/devices/_deviceId/properties/index.vue
@@ -93,11 +93,6 @@ import DevicePropertyInfo from '@/components/DevicePropertyInfo.vue'
 export default class DevicePropertiesShowPage extends Vue {
   private isLoading = false
   private isSaving = false
-  private compartments: Compartment[] = []
-  private samplingMedias: SamplingMedia[] = []
-  private properties: Property[] = []
-  private units: Unit[] = []
-  private measuredQuantityUnits: MeasuredQuantityUnit[] = []
 
   /**
    * a DeviceProperty
@@ -109,32 +104,62 @@ export default class DevicePropertiesShowPage extends Vue {
   // @ts-ignore
   readonly value!: DeviceProperty
 
+  /**
+   * a list of compartments
+   */
+  @Prop({
+    default: () => [] as Compartment[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly compartments!: Compartment[]
+
+  /**
+   * a list of samplingMedias
+   */
+  @Prop({
+    default: () => [] as SamplingMedia[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly samplingMedias!: SamplingMedia[]
+
+  /**
+   * a list of properties
+   */
+  @Prop({
+    default: () => [] as Property[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly properties!: Property[]
+
+  /**
+   * a list of units
+   */
+  @Prop({
+    default: () => [] as Unit[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly units!: Unit[]
+
+  /**
+   * a list of measuredQuantityUnits
+   */
+  @Prop({
+    default: () => [] as MeasuredQuantityUnit[],
+    required: false,
+    type: Array
+  })
+  // @ts-ignore
+  readonly measuredQuantityUnits!: MeasuredQuantityUnit[]
+
   mounted () {
-    this.$api.compartments.findAllPaginated().then((foundCompartments) => {
-      this.compartments = foundCompartments
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of compartments failed')
-    })
-    this.$api.samplingMedia.findAllPaginated().then((foundSamplingMedias) => {
-      this.samplingMedias = foundSamplingMedias
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of sampling medias failed')
-    })
-    this.$api.properties.findAllPaginated().then((foundProperties) => {
-      this.properties = foundProperties
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of properties failed')
-    })
-    this.$api.units.findAllPaginated().then((foundUnits) => {
-      this.units = foundUnits
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of units failed')
-    })
-    this.$api.measuredQuantityUnits.findAllPaginated().then((foundUnits) => {
-      this.measuredQuantityUnits = foundUnits
-    }).catch(() => {
-      this.$store.commit('snackbar/setError', 'Loading of measuredquantityunits failed')
-    })
   }
 
   get isInProgress (): boolean {