Cleanup toggling display and edit components

entries/static/entries/js/components/main.js

@@ -2,6 +2,7 @@ import LexicalUnitDisplay from './LexicalUnitDisplay.js';
 import LexicalUnitEdit from './LexicalUnitEdit.js';
 
 export default {
+  components: {LexicalUnitDisplay, LexicalUnitEdit},
   props: {
     lexicalUnitId: Number
   },
@@ -16,18 +17,6 @@ export default {
       this.isEdit = true;
     }
   },
-  computed: {
-    leftPaneComponent () {
-      if (!this.lexicalUnitId) return null;
-      if (this.isEdit) return LexicalUnitEdit;
-      return LexicalUnitDisplay;
-    },
-    leftPaneComponentProps () {
-      return {
-        lexicalUnitId: this.lexicalUnitId
-      };
-    }
-  },
   watch: {
     lexicalUnitId () {
       const freshData = this.getInitialData();
@@ -36,8 +25,9 @@ export default {
       });
     }
   },
+
   template: `
-    <div @click="isEdit = !isEdit">kliknij mnie, jestem LU {{ this.lexicalUnitId }}</div>
-    <component :is="leftPaneComponent" v-bind="leftPaneComponentProps" @go-to-edit="goToEdit" />
+    <lexical-unit-display v-if="lexicalUnitId && !isEdit" :lexicalUnitId="lexicalUnitId" @go-to-edit="goToEdit" />
+    <lexical-unit-edit v-if="isEdit" :lexicalUnitId="lexicalUnitId" />
   `
 }