--- a/client/src/components/Main.vue	Wed Apr 17 10:51:30 2019 +0200
+++ b/client/src/components/Main.vue	Wed Apr 17 10:53:13 2019 +0200
@@ -1,39 +1,25 @@
 <template>
   <div id="panes" :class="'d-flex position-absolute rotate' + paneRotate">
-    <div id="pane1" :class="'pane d-flex ' + pane1Class">
-      <component :is="panes[0]" />
-    </div>
+    <Pane :pane="panes[0]" :class="pane1Classes" />
 
     <template v-if="panes.length === 2">
-      <div id="pane2" :class="'pane d-flex ' + pane2Class">
-        <component :is="panes[1]" />
-      </div>
+      <Pane :pane="panes[1]" :class="pane2Classes" />
     </template>
 
     <template v-if="panes.length === 3">
-      <div id="pane3" class="pane d-flex wh-50">
-        <component :is="panes[2]" />
-      </div>
-      <div id="pane2" class="pane d-flex wh-50">
-        <component :is="panes[1]" />
-      </div>
+      <Pane :pane="panes[2]" class="d-flex wh-50" />
+      <Pane :pane="panes[1]" class="d-flex wh-50" />
     </template>
 
     <template v-if="panes.length === 4">
-      <div id="pane2" class="pane d-flex wh-50">
-        <component :is="panes[1]" />
-      </div>
-      <div id="pane4" class="pane d-flex wh-50">
-        <component :is="panes[3]" />
-      </div>
-      <div id="pane3" class="pane d-flex wh-50">
-        <component :is="panes[2]" />
-      </div>
+      <Pane :pane="panes[1]" class="d-flex wh-50" />
+      <Pane :pane="panes[3]" class="d-flex wh-50" />
+      <Pane :pane="panes[2]" class="d-flex wh-50" />
     </template>
   </div>
 </template>
 
-<style lang="sass" scoped>
+<style lang="sass">
 #panes
   top: -0.5px
   right: -0.5px
@@ -77,18 +63,13 @@
 
 export default {
   components: {
-    // all components that are supposed to be displayed in a pane must be registered here
-    Map: () => import("./map/Map"),
-    Fairwayprofile: () => import("./fairway/Fairwayprofile"),
-    AvailableFairwayDepth: () => import("./fairway/AvailableFairwayDepth"),
-    Waterlevel: () => import("./gauge/Waterlevel"),
-    HydrologicalConditions: () => import("./gauge/HydrologicalConditions")
+    Pane: () => import("./Pane")
   },
   computed: {
     ...mapState("application", ["panes", "paneRotate"]),
     // pane 1 and 2 are the only ones that can have varying size
     // thats why tehre is no pane3class or pane4class
-    pane1Class() {
+    pane1Classes() {
       if (this.panes.length === 1) return "wh-100";
       if (this.panes.length === 2 || this.panes.length === 3) {
         if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50";
@@ -98,7 +79,7 @@
         return "wh-50";
       }
     },
-    pane2Class() {
+    pane2Classes() {
       if (this.panes.length === 2) {
         if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50";
         if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100";

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/Pane.vue	Wed Apr 17 10:53:13 2019 +0200
@@ -0,0 +1,40 @@
+<template>
+  <div :id="pane.id" class="pane">
+    <component
+      :is="pane.component"
+      :key="pane.id"
+      :paneCreated="pane.created"
+      :paneMounted="pane.mounted"
+      :paneUpdated="pane.updated"
+      :paneDestroyed="pane.destroyed"
+    />
+  </div>
+</template>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+
+export default {
+  props: ["pane"],
+  components: {
+    // all components that are supposed to be displayed in a pane must be registered here
+    Map: () => import("./map/Map"),
+    Fairwayprofile: () => import("./fairway/Fairwayprofile"),
+    AvailableFairwayDepth: () => import("./fairway/AvailableFairwayDepth"),
+    Waterlevel: () => import("./gauge/Waterlevel"),
+    HydrologicalConditions: () => import("./gauge/HydrologicalConditions")
+  }
+};
+</script>

--- a/client/src/components/map/Map.vue	Wed Apr 17 10:51:30 2019 +0200
+++ b/client/src/components/map/Map.vue	Wed Apr 17 10:53:13 2019 +0200
@@ -43,14 +43,14 @@
 import { Map, View } from "ol";
 import { Stroke, Style, Fill } from "ol/style";
 import { displayError } from "@/lib/errors";
-import { uuid } from "@/lib/mixins";
+import { uuid, paneHooks } from "@/lib/mixins";
 import layers from "@/components/map/layers";
 import "ol/ol.css";
 
 /* for the sake of debugging */
 /* eslint-disable no-console */
 export default {
-  mixins: [uuid],
+  mixins: [uuid, paneHooks],
   data() {
     return {
       map: null,

--- a/client/src/lib/mixins.js	Wed Apr 17 10:51:30 2019 +0200
+++ b/client/src/lib/mixins.js	Wed Apr 17 10:53:13 2019 +0200
@@ -39,4 +39,25 @@
   }
 };
 
-export { sortTable, uuid };
+const paneHooks = {
+  props: {
+    paneCreated: Function,
+    paneMounted: Function,
+    paneUpdated: Function,
+    paneDestroyed: Function
+  },
+  created() {
+    if (this.paneCreated) this.paneCreated();
+  },
+  mounted() {
+    if (this.paneMounted) this.paneMounted();
+  },
+  updated() {
+    if (this.paneUpdated) this.paneUpdated();
+  },
+  destroyed() {
+    if (this.paneDestroyed) this.paneDestroyed();
+  }
+};
+
+export { sortTable, uuid, paneHooks };

--- a/client/src/store/application.js	Wed Apr 17 10:51:30 2019 +0200
+++ b/client/src/store/application.js	Wed Apr 17 10:53:13 2019 +0200
@@ -24,7 +24,7 @@
     secondaryLogo: process.env.VUE_APP_SECONDARY_LOGO_URL,
     logoForPDF: process.env.VUE_APP_LOGO_FOR_PDF_URL,
     popup: null,
-    panes: ["Map"],
+    panes: [{ id: "main", component: "Map" }],
     paneRotate: 1,
     splitscreens: [],
     splitscreenLoading: false,