Move AssigneeTitle vue component

app/assets/javascripts/boards/components/board_sidebar.js

@@ -5,7 +5,7 @@ import Flash from '../../flash';
 import { __ } from '../../locale';
 import Sidebar from '../../right_sidebar';
 import eventHub from '../../sidebar/event_hub';
-import assigneeTitle from '../../sidebar/components/assignees/assignee_title';
+import assigneeTitle from '../../sidebar/components/assignees/assignee_title.vue';
 import assignees from '../../sidebar/components/assignees/assignees.vue';
 import DueDateSelectors from '../../due_date_select';
 import './sidebar/remove_issue';

app/assets/javascripts/sidebar/components/assignees/assignee_title.js → app/assets/javascripts/sidebar/components/assignees/assignee_title.vue

+<script>
 export default {
   name: 'AssigneeTitle',
   props: {
@@ -26,14 +27,18 @@ export default {
       return assignees > 1 ? `${assignees} Assignees` : 'Assignee';
     },
   },
-  template: `
+};
+</script>
+<template>
   <div class="title hide-collapsed">
-      {{assigneeTitle}}
+    {{ assigneeTitle }}
     <i
       v-if="loading"
       aria-hidden="true"
       class="fa fa-spinner fa-spin block-loading"
-      />
+    >
+
+    </i>
     <a
       v-if="editable"
       class="js-sidebar-dropdown-toggle edit-link pull-right"
@@ -52,8 +57,8 @@ export default {
         aria-hidden="true"
         data-hidden="true"
         class="fa fa-angle-double-right"
-        />
+      >
+      </i>
     </a>
   </div>
-  `,
-};
+</template>

app/assets/javascripts/sidebar/components/assignees/sidebar_assignees.vue

 <script>
 import Flash from '../../../flash';
-import AssigneeTitle from './assignee_title';
+import AssigneeTitle from './assignee_title.vue';
 import Assignees from './assignees.vue';
 import Store from '../../stores/sidebar_store';
 import eventHub from '../../event_hub';

changelogs/unreleased/refactor-move-assignee-title-vue-component.yml

+---
+title: Move AssigneeTitle vue component
+merge_request: 17397
+author: George Tsiolis
+type: performance

spec/javascripts/sidebar/assignee_title_spec.js

 import Vue from 'vue';
-import AssigneeTitle from '~/sidebar/components/assignees/assignee_title';
+import AssigneeTitle from '~/sidebar/components/assignees/assignee_title.vue';
 
 describe('AssigneeTitle component', () => {
   let component;