0xD34F

const { position: { x, y }, cell_radius, food_size, food } = this;
const isIntersects = item =>
  (item.x - x) ** 2 + (item.y - y) ** 2 <= (cell_radius + food_size) ** 2;

food.splice(0, food.length, ...food.filter(n => !isIntersects(n)));

// или

for (let i = food.length; i--;) {
  if (isIntersects(food[i])) {
    food.splice(i, 1);
  }
}

// или

let countEaten = 0;

for (let i = 0; i < food.length; i++) {
  food[i - countEaten] = food[i];
  countEaten += isIntersects(food[i]);
}

food.length -= countEaten;

Вот нормальный способ: const index = str.search(/\d/);.

А вот несколько козлиных:

const index = str.match(/^(\D*\d)?/)[0].length - 1;

// или

const index = [...str].findIndex(n => !Number.isNaN(+n));

// или

let index = -1;
for (let i = 0; i < str.length; i++) {
  if ('0123456789'.includes(str[i])) {
    index = i;
    break;
  }
}

Производится отправка формы, страница перезагружается. Добавьте форме @submit.prevent. Или клик по кнопке обрабатывайте иначе: @click.prevent="addGuest".

Сделать из столбцов строки:

const rows = useMemo(() => data.length
  ? data[0].arr.map((n, i) => data.map(m => m.arr[i]))
  : []
, [ data ]);

Ну и отрендерить:

<table>
  <tbody>
    {rows.map(n => <tr>{n.map(m => <td>{m}</td>)}</tr>)}
  </tbody>
</table>

https://jsfiddle.net/s9q0xr78/

Сделайте вычисляемое свойство, где будут все нужные данные - это избавит от необходимости использовать v-if.

Что-то вроде:

categoriesWithPosts() {
  return this.categories.map(n => ({
    ...n,
    posts: this.posts.filter(m => m.category === n.id),
  }));
},

Загружайте конфиг до инициализации приложения:

store.dispatch('config/loadMain').then(() => {
  new Vue({
    ...

Оборачиваете каждый символ в отдельный элемент, которому задаётся translate + opacity.

https://jsfiddle.net/wcg0v654/

При движении вверх или влево координаты искажаются.

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

https://jsfiddle.net/46vfg79L/

А есть ли router-view внутри ./views/control-panel/Index.vue?

$('селектор картинок').unwrap();

Или, без jquery:

function unwrap(element) {
  const wrapper = element.parentNode;
  const fragment = new DocumentFragment();
  DocumentFragment.prototype.append.apply(fragment, wrapper.childNodes);
  wrapper.parentNode.replaceChild(fragment, wrapper);
}

// или

const unwrap = ({ parentNode: wrapper }) =>
  wrapper.replaceWith(...wrapper.childNodes);

document.querySelectorAll('селектор картинок').forEach(unwrap);

const newArr = arr.map((n, i) => n.repeat(i + 1));

или

const newArr = arr.map((n, i) => Array(i + 1).fill(n).join(''));

или

const newArr = arr.map((n, i) => Array(i + 2).join(n));

или

const newArr = [];

for (let i = 0; i < arr.length; i++) {
  let str = '';

  for (let j = 0; j <= i; j++) {
    str += arr[i];
  }

  newArr.push(str);
}

или

const newArr = [];

for (const n of arr) {
  let str = '';

  while ((str = str.concat(n)).length <= newArr.length) ;

  newArr[newArr.length] = str;
}

<p>{cart.some(n => n.id === id) ? 'я есть' : 'меня нет'}</p>

Кроме дефолтного слота можно использовать ещё сколько надо именованных. Так что передавайте дополнительный контент через отдельный слот.

const select = document.querySelector('[name="auto_model"]');

select.append(...Object.values([...select].reduce((acc, n) => {
  if (n.value) {
    const k = n.dataset.mark;
    acc[k] || ((acc[k] = document.createElement('optgroup')).label = k);
    acc[k].append(n);
  }
  return acc;
}, {})));

/\w{6}/.test(password)

Нет, это не

At least six characters long

Это просто шесть символов подряд, до и после них может быть что угодно, в том числе и не требуемые alphanumeric. Поэтому: надо указать, что проверяется вся строка целиком (^ - начало строки, $ - конец); символов может быть больше шести (квантификатор {} позволяет указывать диапазон значений, верхнюю границу оставляем открытой). Т.е., правильно будет так:

/^\w{6,}$/.test(password)

UPD. \w - не alphanumeric, это ещё и _, так что придётся перечислить нужные символы в более явном виде. Кроме того, вместо четырёх отдельных выражений можно сделать одно:

/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/.test(password)

document.querySelector('button').addEventListener('click', function() {
  const val = +document.querySelector('#elem1').value;
  const sign = Math.sign(val);

  document.querySelector('#str').innerHTML = Array
    .from({ length: val * sign + 1 }, (n, i) => val - i * sign)
    .join('<br>');
});

При повторном клике анимация уже задана, так что элемент не меняет своего состояния. Убирайте анимацию после того, как она закончиться:

$('.nextArrow, .backArrow').on('animationend', e => e.target.style.animation = '');

На момент вывода в консоль h1 ещё не существует.
Тип body.children - HTMLCollection, эта штука автоматически обновляется при изменении страницы.
При первом разворачивании объекта в консоли подтягивается его актуальное состояние.

$ids = explode(',', $arr['ids']);

$newArr = array_map(function($n, $i) use($arr) {
  return [ $n, $arr['src'][$i] ];
}, $ids, array_keys($ids));

https://jsfiddle.net/thd7avy2/