Props use objects with required & type values

app/assets/javascripts/boards/components/issue_card_inner.js.es6

@@ -6,9 +6,24 @@
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.IssueCardInner = Vue.extend({
-    props: [
-      'issue', 'issueLinkBase', 'list', 'rootPath',
-    ],
+    props: {
+      issue: {
+        type: Object,
+        required: true,
+      },
+      issueLinkBase: {
+        type: String,
+        required: true,
+      },
+      list: {
+        type: Object,
+        required: false,
+      },
+      rootPath: {
+        type: String,
+        required: true,
+      },
+    },
     methods: {
       showLabel(label) {
         if (!this.list) return true;

app/assets/javascripts/boards/components/modal/empty_state.js.es6

@@ -6,9 +6,16 @@
     data() {
       return ModalStore.store;
     },
-    props: [
-      'image', 'newIssuePath',
-    ],
+    props: {
+      image: {
+        type: String,
+        required: true,
+      },
+      newIssuePath: {
+        type: String,
+        required: true,
+      },
+    },
     computed: {
       contents() {
         const obj = {

app/assets/javascripts/boards/components/modal/footer.js.es6

@@ -41,7 +41,7 @@
       },
     },
     components: {
-      listsDropdown: gl.issueBoards.ModalFooterListsDropdown,
+      'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
     },
     template: `
       <footer

app/assets/javascripts/boards/components/modal/header.js.es6

@@ -24,7 +24,7 @@
       },
     },
     components: {
-      modalTabs: gl.issueBoards.ModalTabs,
+      'modal-tabs': gl.issueBoards.ModalTabs,
     },
     template: `
       <div>

app/assets/javascripts/boards/components/modal/index.js.es6

@@ -8,10 +8,24 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.IssuesModal = Vue.extend({
-    props: [
-      'blankStateImage', 'newIssuePath', 'issueLinkBase',
-      'rootPath',
-    ],
+    props: {
+      blankStateImage: {
+        type: String,
+        required: true,
+      },
+      newIssuePath: {
+        type: String,
+        required: true,
+      },
+      issueLinkBase: {
+        type: String,
+        required: true,
+      },
+      rootPath: {
+        type: String,
+        required: true,
+      },
+    },
     data() {
       return ModalStore.store;
     },
@@ -76,10 +90,10 @@
       },
     },
     components: {
-      modalHeader: gl.issueBoards.IssuesModalHeader,
-      modalList: gl.issueBoards.ModalList,
-      modalFooter: gl.issueBoards.ModalFooter,
-      emptyState: gl.issueBoards.ModalEmptyState,
+      'modal-header': gl.issueBoards.IssuesModalHeader,
+      'modal-list': gl.issueBoards.ModalList,
+      'modal-footer': gl.issueBoards.ModalFooter,
+      'empty-state': gl.issueBoards.ModalEmptyState,
     },
     template: `
       <div

app/assets/javascripts/boards/components/modal/list.js.es6

@@ -6,9 +6,16 @@
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalList = Vue.extend({
-    props: [
-      'issueLinkBase', 'rootPath',
-    ],
+    props: {
+      issueLinkBase: {
+        type: String,
+        required: true,
+      },
+      rootPath: {
+        type: String,
+        required: true,
+      },
+    },
     data() {
       return ModalStore.store;
     },
@@ -94,7 +101,7 @@
       this.destroyMasonry();
     },
     components: {
-      issueCardInner: gl.issueBoards.IssueCardInner,
+      'issue-card-inner': gl.issueBoards.IssueCardInner,
     },
     template: `
       <section

app/assets/javascripts/boards/components/sidebar/remove_issue.js.es6

@@ -6,9 +6,16 @@
   window.gl.issueBoards = window.gl.issueBoards || {};
 
   gl.issueBoards.RemoveIssueBtn = Vue.extend({
-    props: [
-      'issue', 'list',
-    ],
+    props: {
+      issue: {
+        type: Object,
+        required: true,
+      },
+      list: {
+        type: Object,
+        required: true,
+      },
+    },
     methods: {
       removeIssue() {
         const lists = this.issue.getLists();