Add mixin

app/assets/javascripts/issuable/related_issues/components/issue_item.vue

 <script>
 import eventHub from '../event_hub';
-import tooltip from '../../../vue_shared/directives/tooltip';
+import relatedIssueMixin from '../mixins/related_issues_mixin';
 
 export default {
   name: 'IssueItem',
-  data() {
-    return {
-      removeDisabled: false,
-    };
-  },
-  props: {
-    idKey: {
-      type: Number,
-      required: true,
-    },
-    displayReference: {
-      type: String,
-      required: true,
-    },
-    eventNamespace: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    title: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    path: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    state: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    canRemove: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    canReorder: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-
-  directives: {
-    tooltip,
-  },
-
+  mixins: [relatedIssueMixin],
   computed: {
-    hasState() {
-      return this.state && this.state.length > 0;
-    },
     stateTitle() {
       return this.isOpen ? 'Open' : 'Closed';
     },
-    isOpen() {
-      return this.state === 'opened';
-    },
-    isClosed() {
-      return this.state === 'closed';
-    },
-    hasTitle() {
-      return this.title.length > 0;
-    },
-    computedLinkElementType() {
-      return this.path.length > 0 ? 'a' : 'span';
-    },
-    computedPath() {
-      return this.path.length ? this.path : null;
-    },
-  },
-
-  methods: {
-    onRemoveRequest() {
-      let namespacePrefix = '';
-      if (this.eventNamespace && this.eventNamespace.length > 0) {
-        namespacePrefix = `${this.eventNamespace}-`;
-      }
-
-      eventHub.$emit(`${namespacePrefix}removeRequest`, this.idKey);
-
-      this.removeDisabled = true;
-    },
   },
 };
 </script>

app/assets/javascripts/issuable/related_issues/components/issue_token.vue

 <script>
 import eventHub from '../event_hub';
 import tooltip from '../../../vue_shared/directives/tooltip';
+import relatedIssueMixin from '../mixins/related_issues_mixin';
 
 export default {
   name: 'IssueToken',
-  data() {
-    return {
-      removeDisabled: false,
-    };
-  },
+  mixins: [relatedIssueMixin],
   props: {
-    idKey: {
-      type: Number,
-      required: true,
-    },
-    displayReference: {
-      type: String,
-      required: true,
-    },
-    eventNamespace: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    title: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    path: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    state: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    canRemove: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    canReorder: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     isCondensed: {
       type: Boolean,
       required: false,
       default: false,
     },
   },
-
-  directives: {
-    tooltip,
-  },
-
   computed: {
     removeButtonLabel() {
       return `Remove ${this.displayReference}`;
     },
-    hasState() {
-      return this.state && this.state.length > 0;
-    },
     stateTitle() {
       if (this.isCondensed) return '';
 
       return this.isOpen ? 'Open' : 'Closed';
     },
-    isOpen() {
-      return this.state === 'opened';
-    },
-    isClosed() {
-      return this.state === 'closed';
-    },
-    hasTitle() {
-      return this.title.length > 0;
-    },
-    computedLinkElementType() {
-      return this.path.length > 0 ? 'a' : 'span';
-    },
-    computedPath() {
-      return this.path.length ? this.path : null;
-    },
     innerComponentType() {
       return this.isCondensed ? 'span' : 'div';
     },
@@ -93,19 +29,6 @@ export default {
       return this.isCondensed ? this.title : '';
     },
   },
-
-  methods: {
-    onRemoveRequest() {
-      let namespacePrefix = '';
-      if (this.eventNamespace && this.eventNamespace.length > 0) {
-        namespacePrefix = `${this.eventNamespace}-`;
-      }
-
-      eventHub.$emit(`${namespacePrefix}removeRequest`, this.idKey);
-
-      this.removeDisabled = true;
-    },
-  },
 };
 </script>
 

app/assets/javascripts/issuable/related_issues/mixins/related_issues_mixin.js

+import tooltip from '../../../vue_shared/directives/tooltip';
+
+const mixins = {
+  data() {
+    return {
+      removeDisabled: false,
+    };
+  },
+  props: {
+    idKey: {
+      type: Number,
+      required: true,
+    },
+    displayReference: {
+      type: String,
+      required: true,
+    },
+    eventNamespace: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    path: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    state: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    canRemove: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    canReorder: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  directives: {
+    tooltip,
+  },
+  computed: {
+    hasState() {
+      return this.state && this.state.length > 0;
+    },
+    isOpen() {
+      return this.state === 'opened';
+    },
+    isClosed() {
+      return this.state === 'closed';
+    },
+    hasTitle() {
+      return this.title.length > 0;
+    },
+    computedLinkElementType() {
+      return this.path.length > 0 ? 'a' : 'span';
+    },
+    computedPath() {
+      return this.path.length ? this.path : null;
+    },
+  },
+  methods: {
+    onRemoveRequest() {
+      let namespacePrefix = '';
+      if (this.eventNamespace && this.eventNamespace.length > 0) {
+        namespacePrefix = `${this.eventNamespace}-`;
+      }
+
+      eventHub.$emit(`${namespacePrefix}removeRequest`, this.idKey);
+
+      this.removeDisabled = true;
+    },
+  },
+};
+
+export default mixins;