0xD34F

echo str_pad($num, 6, '0', STR_PAD_LEFT);

function removeClasses({ classList: cl }, mask) {
  const reg = RegExp(`^${mask.replace(/\*/g, '\\S+')}`);
  cl.remove(...Array.prototype.filter.call(cl, n => reg.test(n)));
}

Не вижу, чтобы где-то происходило чтение данных из localStorage. Ну и какой-то малопонятный мусорный код ещё появился, newColumns - что это, зачем? В header.ondrop сохраняете:

localStorage.setItem('reorder', JSON.stringify(this.reorder));

В конструкторе получаете:

this.reorder = JSON.parse(localStorage.getItem('reorder')) || [];

https://jsfiddle.net/qd8Lab7f/

Делаете свойство active, которое будет ссылкой на выбранное изображение, начальное значение null. Выносите модальное окно за пределы v-for - достаточно и одного, знаете ли. В разметке окна меняете все i. на active.. Условие рендеринга окна станет v-if="active". Обработчик клика кнопки закрытия окна: @click="active = null". Обработчик клика на изображение внутри v-for: @click="active = i".

Данные по целям и составляющим их задачам сложить в массив:

data: () => ({
  goals: [
    {
      name: '...',
      tasks: [
        { name: '...', value: 0 },
        { name: '...', value: 0 },
        ...
      ],
    },
    ...
  ],
}),

Сделать метод, который на основании суммы задач будет определять, какие value доступны для выбора:

methods: {
  getValues(tasks, task) {
    const max = 100 - tasks.reduce((acc, n) => acc + n.value, -task.value);
    return [ 0, 10, 20, 30, 40, 50, 60 ].filter(n => n <= max);
  },
},

Отрендерить select'ы:

<tr v-for="g in goals">
  <td>{{ g.name }}</td>
  <td>
    <div v-for="t in g.tasks" class="task">
      {{ t.name }}
      <select v-model.number="t.value">
        <option v-for="v in getValues(g.tasks, t)" :value="v">{{ v }}</option>
      </select>
    </div>
  </td>
</tr>

https://jsfiddle.net/qmu1enhy/

в обычном html файле

В смысле - без использования систем сборки?

Ну, подключаете код и стили:

<script src="vue-date-pick-master/dist/vueDatePick.js"></script>
<link href="vue-date-pick-master/dist/vueDatePick.css" rel="stylesheet">

Всё, компонент будет доступен через переменную VueDatePick.

Дальше можете указывать его в components:

components: {
  VueDatePick,
},

Или зарегистрировать глобально:

Vue.component('date-pick', VueDatePick);

function setNestedValue(root, ...args) {
  const val = args.pop();
  const key = (args = args.join('.').split('.')).pop();
  args.reduce((p, c) => p[c] = p[c] || {}, root)[key] = val;
}


const obj = {};
setNestedValue(obj, 'xxx', 'yyy', 'zzz', 69);
setNestedValue(obj, 'xxx.a.b.c', 187);
setNestedValue(obj, '_', 666);

Не надо рендерить элемент, в который вы выводите data.capitalization, пока нет data: v-if="data".

Сортируем интервалы по возрастанию нижней границы. Перебираем интервалы и сохраняем текущий интервал в случае если ничего не сохранено (т.е., нулевой интервал сохраняется всегда) или если нижняя граница текущего интервала превышает верхнюю границу последнего сохранённого; в противном случае проверяем, что верхняя граница последнего сохранённого интервала ниже верхней границе текущего, если да - обновляем последний сохранённый - заменяем его верхнюю границу на верхнюю границу текущего.

function mergeIntervals(intervals) {
  intervals = intervals.map(n => [...n]);

  if (intervals.length < 2) {
    return intervals;
  }

  intervals.sort((a, b) => a[0] - b[0]);

  const stack = [];

  intervals.forEach(n => {
    const top = stack[stack.length - 1];

    if (!top || top[1] < n[0]) {
      stack.push(n);
    } else if (top[1] < n[1]) {
      top[1] = n[1];
    }
  });

  return stack;
}

each item in jsons.checks.checksData
  label.check__label
    input(type="checkbox").check__input
    | #{item.title}

$array = array_map(function($n) use($keys) {
  return array_combine($keys, $n);
}, $array);

Не могу понять как правильно написать цикл перебора.

Цикл не нужен, метод attr умеет принимать функцию и применять её к каждому элементу набора:

$('.hello').attr('data-class', function() {
  return [...this.classList].filter(n => n !== 'hello');
});

И без jquery - цикл в явном виде тоже не нужен:

document.querySelectorAll('.hello').forEach(n => {
  n.dataset.class = n.className.replace(/(^| )hello( | $)/, ' ').trim();
});

Одно непонятно - гарантируется ли, что классов будет всего два? Что если их окажется больше?

Но если точно известно, что классов будет всегда два, и порядок тоже гарантирован, то можно буквально хватать "второй" класс:

$('.hello').attr('data-class', function() {
  return this.classList[1];
});

или

document.querySelectorAll('.hello').forEach(n => {
  n.dataset.class = n.className.split(' ').pop();
});

Array.prototype.push.apply(
  arr,
  newArr.filter(n => !arr.some(m => m.trade_id === n.trade_id))
);

или

const pushDiff = (target, source, key = n => n) =>
  target.push(...source.filter(function(n) {
    return !this.has(key(n));
  }, new Set(target.map(key))));


pushDiff(arr, newArr, n => n.trade_id);

Уберите setTimeout. Из-за него с запозданием отображается сообщение, соответствующее одному из предыдущих результатов поиска, когда ничего найдено не было: запрос - ничего не найдено - setTimeout на показ сообщения об отсутствии результатов - запрос - результаты есть, они отображаются - показ сообщения об отсутствии результатов.

Используйте mouseenter вместо mouseover. Ну и нелишним будет ознакомиться с вот этим.

p:nth-child(n + 2) {

или

p:not(:first-child) {

или

p + p {

Маркерам добавляются идентификаторы - свойство с уникальным значением, а "элементам вне карты" добавляется соответствующий data-атрибут. При клике достаётся значение идентификатора, по значению data-атрибута определяется элемент, которому надо добавить класс. Всё.