Created form component instead of using :is incorrectly

[ci skip]

app/assets/javascripts/issue_show/components/app.vue

@@ -7,7 +7,7 @@ import Service from '../services/index';
 import Store from '../stores';
 import titleComponent from './title.vue';
 import descriptionComponent from './description.vue';
-import editActions from './edit_actions.vue';
+import formComponent from './form.vue';
 
 export default {
   props: {
@@ -56,9 +56,6 @@ export default {
     };
   },
   computed: {
-    elementType() {
-      return this.showForm ? 'form' : 'div';
-    },
     formState() {
       return this.store.formState;
     },
@@ -66,7 +63,7 @@ export default {
   components: {
     descriptionComponent,
     titleComponent,
-    editActions,
+    formComponent,
   },
   methods: {
     openForm() {
@@ -143,22 +140,23 @@ export default {
 </script>
 
 <template>
-  <div :is="elementType">
+  <div>
-    <title-component
+    <form-component
-      :form-state="formState"
-      :show-form="showForm"
-      :issuable-ref="issuableRef"
-      :title-html="state.titleHtml"
-      :title-text="state.titleText" />
-    <description-component
-      v-if="state.descriptionHtml"
-      :can-update="canUpdate"
-      :description-html="state.descriptionHtml"
-      :description-text="state.descriptionText"
-      :updated-at="state.updatedAt"
-      :task-status="state.taskStatus" />
-    <edit-actions
       v-if="canUpdate && showForm"
+      :form-state="formState"
       :can-destroy="canDestroy" />
+    <div v-else>
+      <title-component
+        :issuable-ref="issuableRef"
+        :title-html="state.titleHtml"
+        :title-text="state.titleText" />
+      <description-component
+        v-if="state.descriptionHtml"
+        :can-update="canUpdate"
+        :description-html="state.descriptionHtml"
+        :description-text="state.descriptionText"
+        :updated-at="state.updatedAt"
+        :task-status="state.taskStatus" />
+    </div>
   </div>
 </template>

app/assets/javascripts/issue_show/components/form.vue

@@ -0,0 +1,30 @@
+<script>
+  import titleField from './fields/title.vue';
+  import editActions from './edit_actions.vue';
+
+  export default {
+    props: {
+      canDestroy: {
+        type: Boolean,
+        required: true,
+      },
+      formState: {
+        type: Object,
+        required: true,
+      },
+    },
+    components: {
+      titleField,
+      editActions,
+    },
+  };
+</script>
+
+<template>
+  <form>
+    <title-field
+      :form-state="formState" />
+    <edit-actions
+      :can-destroy="canDestroy" />
+  </form>
+</template>

app/assets/javascripts/issue_show/components/title.vue

@@ -1,12 +1,8 @@
 <script>
   import animateMixin from '../mixins/animate';
-  import titleField from './fields/title.vue';
 
   export default {
     mixins: [animateMixin],
-    components: {
-      titleField,
-    },
     data() {
       return {
         preAnimation: false,
@@ -27,14 +23,6 @@
         type: String,
         required: true,
       },
-      formState: {
-        type: Object,
-        required: true,
-      },
-      showForm: {
-        type: Boolean,
-        required: true,
-      },
     },
     watch: {
       titleHtml() {
@@ -53,19 +41,13 @@
 </script>
 
 <template>
-  <div>
+  <h2
-    <title-field
+    class="title"
-      v-if="showForm"
+    :class="{
-      :form-state="formState" />
+      'issue-realtime-pre-pulse': preAnimation,
-    <h2
+      'issue-realtime-trigger-pulse': pulseAnimation
-      v-else
+    }"
-      class="title"
+    v-html="titleHtml"
-      :class="{
+  >
-        'issue-realtime-pre-pulse': preAnimation,
+  </h2>
-        'issue-realtime-trigger-pulse': pulseAnimation
-      }"
-      v-html="titleHtml"
-    >
-    </h2>
-  </div>
 </template>