0xD34F

по клику на чекбокс не происходит фильтрация items

Ну ткнулись вы в чекбокс name, например - дальше что должно происходить? Чтобы фильтрация выполнилась, кроме активации фильтра надо ещё что-то ввести в строку поиска.

как запустить bootstrap пример

Ну, НАВЕРНОЕ, КАК МИНИМУМ, скопировать его полностью - чего вы не сделали.

как можно реализовать фильтрацию списка по статусу...

Добавить в компонент свойство - выбранный статус. Устанавливать его значение при клике. Сделать собственную функцию фильтрации. Например.

...по клику на кнопки

Не очень понятно, зачем обычные кнопки - есть же радио.

const func = () => {
  console.log('hello, world!!');
  setTimeout(func, 500 + Math.random() * 1000 | 0);
};

func();

const insert = (str, indices, substr = ' ') =>
  Array.prototype.reduce.call(
    str,
    (acc, n, i) => acc + (indices.includes(i) ? substr : '') + n,
    ''
  );

// или

const insert = (str, indices, substr = ' ') => [...indices]
  .sort((a, b) => b - a)
  .reduce((acc, n) => (acc.splice(n, 0, substr), acc), [...str])
  .join('');

// или

const insert = (str, indices, substr = ' ') => []
  .concat(0, indices)
  .sort((a, b) => a - b)
  .map((n, i, a) => str.slice(n, a[i + 1]))
  .join(substr);

// или

const insert = (str, indices, substr = ' ') => indices.length
  ? str.replace(RegExp(indices.map((n, i) => `(?<=^.{${n}})`).join('|'), 'g'), substr)
  : str;

Пользоваться этим, понятное дело, так: str = insert(str, [ 1, 3, 6, 8, 10 ]);.

$(window).on('scroll', function() {
  const top = $(this).scrollTop();
  const index = [ 50, 100, 150, Infinity ].findIndex(n => n > top);
  $('.int > div').removeClass('active').eq(index).addClass('active');
}).scroll();

не могу понять, как сделать так, чтобы при втором условии числа выводились от меньшего к большему

Представленный вами код делает именно это. Наверное, вместо "меньшего"/"большего" должно было быть написано "первого"/"второго". В любом случае, в двух циклах необходимости нет.

Вывод чисел от первого ко второму:

const step = Math.sign(p2 - p1);
while (Math.abs(p2 - p1) >= 1) {
  p1 += step;
  console.log(p1);
}

Вывод чисел от меньшего к большему:

[ p1, p2 ] = p1 > p2 ? [ p2, p1 ] : [ p1, p2 ];
while (p1 < p2) {
  p1 += 1;
  console.log(p1);
}

Получить номер кликнутого элемента:

const index = $(this).closest('.catalog-wrap__item').index();

Переключиться на соответствующий слайд:

$('#galleryslider').slick('slickGoTo', index);

const
  [  name,   price,   number ] =
  [ 'name', 'price', 'number' ]
    .map(n => document.querySelector(`input[name="${n}"]`).value.split(', '));

const arr = name.map((n, i) => ({
  name: n,
  price: price[i],
  number: +number[i],
}));

Версия bootstrap-vue устаревшая используется. Да и сам vue тоже другой нужен. Обновите их.

Ну или меняйте синтаксис слотов на старый. Т.е., например, вместо

v-slot:cell(index)="data"

будет

slot="index" slot-scope="data"

set(count) {
  this.$store.commit('setCount', {
    count,
    index: this.index,
  });
},

@keyframe

@keyframes

const newData = JSON.parse(data).map(Object.values);

numberInput.addEventListener('input', ({ target: t }) => {
  t.value = ((t.value.match(/\d/g) || []).join('').match(/\d{1,4}/g) || []).join(' ');
});

Замените

@keyup.enter.prevent

на

@keydown.enter.prevent.exact

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/