Replaces underscore with lodash and vanilla JS

  * Trying vanilla first

app/assets/javascripts/boards/components/board_list.vue

 <script>
 import { Sortable, MultiDrag } from 'sortablejs';
 import { GlLoadingIcon } from '@gitlab/ui';
-import _ from 'underscore';
 import boardNewIssue from './board_new_issue.vue';
 import boardCard from './board_card.vue';
 import eventHub from '../eventhub';
@@ -266,11 +265,12 @@ export default {
          * same list or the other list. Don't remove items if it's same list.
          */
         const isSameList = toList && toList.id === this.list.id;
-
         if (toList && !isSameList && boardsStore.shouldRemoveIssue(this.list, toList)) {
           const issues = items.map(item => this.list.findIssue(Number(item.dataset.issueId)));
-
-          if (_.compact(issues).length && !boardsStore.issuesAreContiguous(this.list, issues)) {
+          if (
+            issues.filter(Boolean).length &&
+            !boardsStore.issuesAreContiguous(this.list, issues)
+          ) {
             const indexes = [];
             const ids = this.list.issues.map(i => i.id);
             issues.forEach(issue => {

app/assets/javascripts/boards/components/boards_selector.vue

 <script>
-import { throttle } from 'underscore';
+import { throttle } from 'lodash';
 import {
   GlLoadingIcon,
   GlSearchBoxByType,

app/assets/javascripts/boards/components/issue_card_inner.vue

 <script>
-import _ from 'underscore';
+import { sortBy } from 'lodash';
 import { mapState } from 'vuex';
 import { GlLabel, GlTooltipDirective } from '@gitlab/ui';
 import issueCardInner from 'ee_else_ce/boards/mixins/issue_card_inner';
@@ -100,10 +100,7 @@ export default {
       return !groupId ? referencePath.split('#')[0] : null;
     },
     orderedLabels() {
-      return _.chain(this.issue.labels)
-        .filter(this.isNonListLabel)
-        .sortBy('title')
-        .value();
+      return sortBy(this.issue.labels.filter(this.isNonListLabel), 'title');
     },
     helpLink() {
       return boardsStore.scopedLabels.helpLink;

app/assets/javascripts/boards/components/project_select.vue

 <script>
 import $ from 'jquery';
-import _ from 'underscore';
+import { escape } from 'lodash';
 import { GlLoadingIcon } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import { __ } from '~/locale';
@@ -83,7 +83,7 @@ export default {
               }" data-project-name="${project.name}" data-project-name-with-namespace="${
           project.name_with_namespace
         }">
-                ${_.escape(project.name_with_namespace)}
+                ${escape(project.name_with_namespace)}
               </a>
             </li>
           `;

app/assets/javascripts/boards/stores/boards_store.js

@@ -2,7 +2,7 @@
 /* global List */
 
 import $ from 'jquery';
-import _ from 'underscore';
+import { sortBy } from 'lodash';
 import Vue from 'vue';
 import Cookies from 'js-cookie';
 import BoardsStoreEE from 'ee_else_ce/boards/stores/boards_store_ee';
@@ -76,8 +76,7 @@ const boardsStore = {
   },
   addList(listObj) {
     const list = new List(listObj);
-    this.state.lists = _.sortBy([...this.state.lists, list], 'position');
-
+    this.state.lists = sortBy([...this.state.lists, list], 'position');
     return list;
   },
   new(listObj) {
@@ -90,7 +89,7 @@ const boardsStore = {
         // Remove any new issues from the backlog
         // as they will be visible in the new list
         list.issues.forEach(backlogList.removeIssue.bind(backlogList));
-        this.state.lists = _.sortBy(this.state.lists, 'position');
+        this.state.lists = sortBy(this.state.lists, 'position');
       })
       .catch(() => {
         // https://gitlab.com/gitlab-org/gitlab-foss/issues/30821
@@ -194,10 +193,9 @@ const boardsStore = {
 
   moveMultipleIssuesToList({ listFrom, listTo, issues, newIndex }) {
     const issueTo = issues.map(issue => listTo.findIssue(issue.id));
-    const issueLists = _.flatten(issues.map(issue => issue.getLists()));
+    const issueLists = issues.map(issue => issue.getLists()).flat();
     const listLabels = issueLists.map(list => list.label);
-
-    const hasMoveableIssues = _.compact(issueTo).length > 0;
+    const hasMoveableIssues = issueTo.filter(Boolean).length > 0;
 
     if (!hasMoveableIssues) {
       // Check if target list assignee is already present in this issue