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,10 +140,13 @@ export default {
 </script>
 
 <template>
-  <div :is="elementType">
-    <title-component
+  <div>
+    <form-component
+      v-if="canUpdate && showForm"
       :form-state="formState"
-      :show-form="showForm"
+      :can-destroy="canDestroy" />
+    <div v-else>
+      <title-component
         :issuable-ref="issuableRef"
         :title-html="state.titleHtml"
         :title-text="state.titleText" />
@@ -157,8 +157,6 @@ export default {
         :description-text="state.descriptionText"
         :updated-at="state.updatedAt"
         :task-status="state.taskStatus" />
-    <edit-actions
-      v-if="canUpdate && showForm"
-      :can-destroy="canDestroy" />
+    </div>
   </div>
 </template>

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

+<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

 <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,12 +41,7 @@
 </script>
 
 <template>
-  <div>
-    <title-field
-      v-if="showForm"
-      :form-state="formState" />
   <h2
-      v-else
     class="title"
     :class="{
       'issue-realtime-pre-pulse': preAnimation,
@@ -67,5 +50,4 @@
     v-html="titleHtml"
   >
   </h2>
-  </div>
 </template>