0xD34F

Это просто компонент, рисующий график, доступа к chartist API он не предоставляет. Так что надо импортировать chartist отдельно:

import chartist from 'chartist';

Соответственно, вместо

VueChartist.Interpolation.simple()

будет

chartist.Interpolation.simple()

https://codesandbox.io/s/vue-template-uh9j2

str.gsub(/\b(\w+) \1/i, '\1')

https://jsfiddle.net/gxab98nq/

т.к. объектов много (~2000) при очистке фильтра страница подлагивает

Пагинацию сделайте - вместо двух тысяч будет отображаться одновременно несколько десятков.

Да и вообще, заставлять пользователей созерцать тысячи объектов, вне зависимости от скорости отрисовки - само по себе неправильно. Не может человек столько информации воспринять за один раз.

const videos = document.querySelectorAll('video');
const onPlay = e => videos.forEach(n => n !== e.target && n.pause());
videos.forEach(n => n.addEventListener('play', onPlay));

каждый пункт из этого списка должен выводиться на конкретной странице, например, в виде заголовка

Раскидайте элементы списка по метаданным маршрутов, и

<h1>{{ $route.meta.title }}</h1>

Функция array_map умеет работать более чем с одним массивом:

echo implode('<br>', array_map(function($n, $i) use(&$result) {
  return
    "Книгу ".$result['BOOKS'][$i]['bookName'].
    " написали для машины ".$n['name']." в ".$n['year'].
    " году, можно заказать по электронной почте ".$result['BOOKS'][$i]['authorEmail'];
}, $result['CARS'], array_keys($result['BOOKS'])));

Сделать объект с транслитерированными символами:

const letters = {
  'а': 'a',
  'б': 'b',
  'в': 'v',
  ...
};

В стейте хранить оригинальное и транслитерированное значения:

state = {
  value: '',
  translitValue: '',
}

При изменении содержимого инпута с оригинальным значением обновлять оба:

onChange = ({ target: { value } }) => {
  this.setState({
    value,
    translitValue: value.toLowerCase().split('').map(n => letters[n] || n).join(''),
  });
}

<input value={this.state.value} onChange={this.onChange} />
<input value={this.state.translitValue} readOnly />

https://jsfiddle.net/oeL4u68t/

data: () => ({
  filters: [ 'ArmorProtective_LowerBody', 'ArmorProtective_Head' ],
  activeFilter: null,
  ...


computed: {
  filteredHeads() {
    const f = this.activeFilter;
    return f
      ? this.heads.flatMap(n => n[f]).filter(Boolean)
      : [];
  },
  ...

<a v-for="f in filters" @click="activeFilter = f">{{ f }}</a>
...


<div v-for="head in filteredHeads">
  ...

Данные вкладок кладём в массив:

const items = [
  { title: 'London', content: 'London is the capital city of England.' },
  { title: 'Paris', content: 'Paris is the capital of France.' },
  { title: 'Tokyo', content: 'Tokyo is the capital of Japan.' },
];

Делаем компонент, отображающий вкладку. Тут ничего сложного - просто выводятся переданные данные:

const TabContent = ({ title, content }) => (
  <div className="tabcontent">
    <h3>{title}</h3>
    <p>{content}</p> 
  </div>
);

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

function Tabs({ items }) {
  const [ active, setActive ] = React.useState(null);

  const openTab = e => setActive(+e.target.dataset.index);

  return (
    <div>
      <div className="tab">
        {items.map((n, i) => (
          <button
            className={`tablinks ${i === active ? 'active' : ''}`}
            onClick={openTab}
            data-index={i}
          >{n.title}</button>
        ))}
      </div>
      {items[active] && <TabContent {...items[active]} />}
    </div>
  );
}

https://jsfiddle.net/0dhaojze/

Убрать emit из дочернего компонента, v-on из родительского. Параметр list - заменить статическую передачу значения на динамическую: :list="{{ json_encode($tasks) }}". Так переданное значение будет рассматриваться не как строка, а в качестве javascript выражения - применять JSON.parse не нужно.

https://jsfiddle.net/cjf14ek3/

const str = arr
  .map(n => `${n[0].toUpperCase()}${n.slice(1)}`)
  .join(', ');

// или

const str = arr.reduce((acc, n) => acc + (acc && ', ') + n.replace(/./, m => m.toUpperCase()), '');

// или

const str = arr
  .map(n => ''.concat(...Array.from(n, (m, i) => i ? m : m.toUpperCase())))
  .join`, `;

+str.replace(/.+img-(?=\d)|\D+$/g, '')

или

str.match(/(?<=img-)\d+/) | 0

или

parseInt(str.split('/img-').pop())

есть массив индексов [0, 3, 1, empty, 2]
<...>
должно быть - [100, 400, 200, empty, 300]

Что, вот прям так - empty? Ну, держите:

for (let i = 0; i < indexes.length; i++) {
  if (indexes.hasOwnProperty(i)) {
    arr.push(arr[indexes[i]]);
  } else {
    arr.length++;
  }
}
arr.splice(0, arr.length - indexes.length);

Если отказаться от этого идиотизма с empty (пусть в массиве индексов будет что-то не числовое, null например; а в исходный массив подставляться будет undefiend, соответственно), то

arr.splice(0, arr.length, ...indexes.map(i => arr[i]));

Убрать stacking из plotOptions.column. Добавить (туда же) grouping: false.

Заменяем ol на transition-group:

<transition-group tag="ol" name="todo">
  <li
    v-for="(todo, i) in todos"
    :key="todo.id"
    @click="todos.splice(i, 1)"
  >{{ todo.text }}</li>
</transition-group>

И добавляем стили:

li {
  transition: all 0.7s;
}

.todo-leave-active {
  position: absolute;
}

.todo-leave-to {
  transform: translateX(500px);
  opacity: 0;
}

https://jsfiddle.net/8j5ygb7n/

Не нужно здесь никаких вычисляемых свойств, можно использовать для назначения класса name и password:

:class="{ 'authorization__label--done': name }"

:class="{ 'authorization__label--done': password }"

https://codepen.io/anon/pen/PryVPj?editors=1010

UPD. https://jsfiddle.net/y2aL36rp/