simplify usage of issuable mixin

app/assets/javascripts/sidebar/components/lock/edit_form.vue

@@ -18,11 +18,6 @@ export default {
       required: true,
       type: Function,
     },
-
-    issuableType: {
-      required: true,
-      type: String,
-    },
   },
 
   mixins: [
@@ -39,13 +34,13 @@ export default {
   <div class="dropdown open">
     <div class="dropdown-menu sidebar-item-warning-message">
       <p class="text" v-if="isLocked">
-        Unlock this {{ issuableDisplayName(issuableType) }}?
+        Unlock this {{ issuableDisplayName }}?
         <strong>Everyone</strong>
         will be able to comment.
       </p>
 
       <p class="text" v-else>
-        Lock this {{ issuableDisplayName(issuableType) }}?
+        Lock this {{ issuableDisplayName }}?
         Only
         <strong>project members</strong>
         will be able to comment.

app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue

@@ -23,11 +23,6 @@ export default {
         return mediatorObject.service && mediatorObject.service.update && mediatorObject.store;
       },
     },
-
-    issuableType: {
-      required: true,
-      type: String,
-    },
   },
 
   mixins: [
@@ -59,7 +54,7 @@ export default {
         discussion_locked: locked,
       })
       .then(() => location.reload())
-      .catch(() => Flash(this.__(`Something went wrong trying to change the locked state of this ${this.issuableDisplayName(this.issuableType)}`)));
+      .catch(() => Flash(this.__(`Something went wrong trying to change the locked state of this ${this.issuableDisplayName}`)));
     },
   },
 };
@@ -77,7 +72,7 @@ export default {
     </div>
 
     <div class="title hide-collapsed">
-      Lock {{issuableDisplayName(issuableType) }}
+      Lock {{ issuableDisplayName }}
       <button
         v-if="isEditable"
         class="pull-right lock-edit btn btn-blank"

app/assets/javascripts/vue_shared/mixins/issuable.js

 export default {
-  methods: {
-    issuableDisplayName(issuableType) {
-      const displayName = issuableType.replace(/_/, ' ');
+  props: {
+    issuableType: {
+      required: true,
+      type: String,
+    },
+  },
 
-      return this.__ ? this.__(displayName) : displayName;
+  computed: {
+    issuableDisplayName() {
+      return this.issuableType.replace(/_/g, ' ');
     },
   },
 };