0xD34F

О каких select'ах идёт речь, какому input'у и как надо обновить значение:

const container = document.querySelector('селектор контейнера с select\'ами');
const selectSelector = 'селектор select\'ов';
const input = document.querySelector('селектор input\'а');
const updateInput = selects => input.value = Array.from(selects, n => n.value).join(' ');

Слушаем у select'ов событие change, вот собственно и всё:

container.addEventListener('change', function() {
  updateInput(this.querySelectorAll(selectSelector));
});

// или

const selects = container.querySelectorAll(selectSelector);
const onChange = updateInput.bind(null, selects);
selects.forEach(n => n.addEventListener('change', onChange));

swiper.params.slidesPerView = новое количество отображаемых слайдов;
swiper.update();

https://jsfiddle.net/y0p8r91u/1/

карточка и модалка, это как один компонент

вдруг у меня будет таких карточек не 6 а 106

А зачем вам шесть окон? Не говоря уже о ста шести. Сделайте одно, которое будет отображать данные любой из карточек:

function Portfolio() {
  const [ modalData, setModalData ] = useState(null);
  const onClick = (e) => setModalData(cardsData[e.target.dataset.index]);
  const onClose = () => setModalData(null);

  return (
    <div>
      {cardsData.map((n, i) => (
        <button data-index={i} onClick={onClick}>
          open modal #{i + 1}
        </button>
      ))}

      <Modal isOpen={!!modalData} onRequestClose={onClose}>
        {modalData && (<>
          <h2>{modalData.title}</h2>
          <button onClick={onClose}>close</button>
          <div>{modalData.things}</div>
        </>)}
      </Modal>
      /*
       * или, вместо использования isOpen рендерим окно только в том случае,
       * если есть что в нём показывать
       */
      {modalData && (
        <Modal onRequestClose={onClose}>
          <h2>{modalData.title}</h2>
          <button onClick={onClose}>close</button>
          <div>{modalData.things}</div>
        </Modal>
      )}
    </div>
  );
}

Это может быть отсутствие canvas'a - вы пытаетесь отрендерить график сразу же после создания экземпляра компонента, когда никаких DOM-элементов ещё не создано. Оберните код в watcher'е в nextTick.

return {
  ...state,
  array: state.array.map(n => n.id === action.newObject.id ? action.newObject : n),
};

function parallel(tasks, onAllTasksComplete) {
  const results = [];
  let numCompleted = 0;

  function onTaskComplete(index, result) {
    results[index] = result;
    if (++numCompleted === tasks.length) {
      onAllTasksComplete(results);
    }
  }

  for (let i = 0; i < tasks.length; i++) {
    const onComplete = r => onTaskComplete(i, r);
    const result = tasks[i](onComplete);
    if (result !== undefined) {
      onComplete(result);
    }
  }
}

const process = (funcs, initialArg) => funcs.reduce((arg, f) => f(arg), initialArg);

Получить месяц с числом, число обрезать:

const getMonthNameInGenitiveCase = (date = new Date) =>
  date.toLocaleString('ru', {
    month: 'long',
    day: 'numeric',
  }).split(' ')[1];

Или, сделать массив с месяцами, выбирать нужный элемент:

const getMonthNameInGenitiveCase = (date = new Date) =>
  [
    'января', 'февраля', 'марта', 'апреля', 'мая', 'июня',
    'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря',
  ][date.getMonth()];

раз говнокод

два говнокод

Точно так же, как и всё остальное - добавляете описание в props, используете v-bind для привязки функции к экземпляру дочернего компонента.

Но вообще, так в vue делать не принято.
Принято иначе:

1. В дочернем компоненте генерируете событие: <button @click="$emit('click')".
2. В родительском на него подписываетесь: <component @click="onClick".

Хотя, конечно, чисто технически это тоже будет передачей функции - назначенные в родителе обработчики событий доступны в дочернем компоненте через свойство $listeners, так что вместо $emit('click') или (если надо передать родителю какие-то данные) $emit('click', аргумент) можно (но не нужно) написать $listeners.click или $listeners.click(аргумент).

const openSelector = '[data-target]';
const closeSelector = '.modal__close';
const modalSelector = '.modal';
const activeClass = 'modal--active';

Делегирование, общий обработчик клика назначается один раз для всех:

document.addEventListener('click', ({ target: t }) => {
  const open = t.closest(openSelector);
  if (open) {
    document.querySelector(`#${open.dataset.target}`).classList.add(activeClass);
  } else {
    t.closest(closeSelector)?.closest(modalSelector).classList.remove(activeClass);
  }
});

Отдельные обработчики для кнопок открытия и закрытия, назначаются каждой кнопке индивидуально:

const onClick = (selector, handler) => document
  .querySelectorAll(selector)
  .forEach(n => n.addEventListener('click', handler));

onClick(openSelector, ({ currentTarget: { dataset: { target } } }) => {
  document.querySelector(`#${target}`).classList.add(activeClass);
});

onClick(closeSelector, e => {
  e.currentTarget.closest(modalSelector).classList.remove(activeClass);
});

Можно сделать объект, у которого будет определено преобразование в примитив, изменяющее состояние объекта, от которого его примитивное представление зависит:

const obj = {
  val: 1,
  valueOf() {
    return this.val ^= 1;
  },
};

// или

const obj = {
  val: '1',
  toString() {
    return this.val = '1'.slice(this.val.length);
  },
};

// или

const obj = {
  val: true,
  [Symbol.toPrimitive]() {
    return this.val = !this.val;
  },
};

console.log(obj == false, obj == true); // true true
console.log(...Array.from({ length: 5 }, () => +obj)); // 0 1 0 1 0

Как будем определять, должен ли элемент массива остаться:

function mustStay(n) {
  for (const m of arr2) {
    if (m.content.insuranceType === n.value) {
      return false;
    }
  }

  return true;
}

// или

const mustStay = n => arr2.every(m => m.content.insuranceType !== n.value);

// или

const mustStay = function(n) {
  return !this.has(n.value);
}.bind(new Set(arr2.map(n => n.content.insuranceType)));

// или

const mustStay = n =>
  (function next(i) {
    return i >= arr2.length
      ? true
      : arr2[i].content.insuranceType !== n.value && next(-~i);
  })(0);

Удаляем неподходящие:

for (let i = 0; i < arr1.length; i++) {
  if (!mustStay(arr1[i])) {
    for (let j = i--; ++j < arr1.length; arr1[j - 1] = arr1[j]) ;
    arr1.pop();
  }
}

// или

arr1.reduceRight((_, n, i, a) => mustStay(n) || a.splice(i, 1), null);

// или

arr1.splice(0, arr1.length, ...arr1.filter(mustStay));

// или

arr1.length -= arr1.reduce((acc, n, i, a) => (
  a[i - acc] = n,
  acc + !mustStay(n)
), 0);

const steps = [ /* ... */ ];
let iStep = 0;

const question = document.querySelector('.quiz__question');
const answers = document.querySelector('.quiz__answers');

const prev = document.querySelector('.quiz__button_prev');
const next = document.querySelector('.quiz__button_next');

prev.addEventListener('click', () => nextStep(-1));
next.addEventListener('click', () => nextStep(+1));

function nextStep(stepChange) {
  iStep = Math.max(0, Math.min(steps.length - 1, iStep + stepChange));

  prev.disabled = iStep === 0;
  next.disabled = iStep === steps.length - 1;

  question.innerHTML = steps[iStep].question;
  answers.innerHTML = steps[iStep].answers.map(n => `<li>${n}</li>`).join('');
}

nextStep(0);

" -> "

ну а лучше уберите строку из шаблона в свойство компонента

Используйте слот expanded-item:

<v-data-table
  :headers="mainTableHeaders"
  :items="mainTableItems"
  item-key="mainTableItemKey"
  show-expand
>
  <template #expanded-item="{ headers, item }">
    <td :colspan="headers.length">
      <v-data-table
        :headers="nestedTableHeaders"
        :items="item.nestedTableItems"
      ></v-data-table>
    </td>
  </template>
</v-data-table>

https://jsfiddle.net/krg8ac7s/

UPD. Как-то пропустил:

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

Убираем show-expand, добавляем обработчик клика, где отображение дополнительного контента будет переключаться вручную:

methods: {
  onRowClick(item, row) {
    row.expand(!row.isExpanded);
  },
  ...

<v-data-table
  @click:row="onRowClick"
  ...

Когда обращаетесь к значению, его ещё нет.

А изменения не отслеживаются.

Класс DB - надо добавить дефолтное значение:

class DB {
  info = null;
  ...

Компонент Episodes - добавить эффекту значение DB.info в качестве зависимости:

const Episodes = observer(() => {
  useEffect(() => {
    ...
  }, [ DB.info ]);
  ...

Если же не хотите видеть дефолтное значение info внутри Episodes, тогда его экземпляр следует рендерить только при наличии данных, в App замените return <Episodes />; на return DB.info && <Episodes />;.

Фильтрам добавить data-атрибуты, указывающие, по какому свойству надо отбирать карточки:

<div data-filter="service">
  <div class="sign">Streaming service</div>
  <div class="item">Netflix</div>
  <div class="item">HBO Max</div>
  <div class="item">Hulu</div>
</div>
<div data-filter="genre">
  <div class="sign">Movie genre</div>
  <div class="item">Comedy</div>
  <div class="item">Action</div>
  <div class="item">Horror</div>
  <div class="item">Drama</div>
  <div class="item">Fantasy</div>
</div>

Эти свойства в виде опять же data-атрибутов добавить карточкам:

<li class="card" data-service="Netflix" data-genre="Comedy">

Собственно фильтрация:

const cardSelector = '.card';
const hiddenCardClass = 'hidden';
const filterSelector = '[data-filter]';
const filterItemSelector = `${filterSelector} .item`;
const activeFilterItemClass = 'item_active';

document.querySelector('.filters').addEventListener('click', e => {
  const item = e.target.closest(filterItemSelector);
  if (!item) {
    return;
  }

  item.closest(filterSelector).querySelectorAll(filterItemSelector).forEach(n => {
    n.classList[n === item ? 'toggle' : 'remove'](activeFilterItemClass);
  });

  const values = Array.from(
    e.currentTarget.querySelectorAll(`.${activeFilterItemClass}`),
    n => [ n.closest(filterSelector).dataset.filter, n.innerText ]
  );

  document.querySelectorAll(cardSelector).forEach(n => {
    n.classList.toggle(hiddenCardClass, values.some(m => n.dataset[m[0]] !== m[1]));
  });
});

setup() {
    let isActive = false
    return {
        isActive
    }
},

Оберните isActive в ref.

API компонента v-text-field подобной возможности не предоставляет, так что придётся закостылить.

На экземпляр компонента вешаем нативный обработчик клика, внутри проверяем, откуда пришло событие:

<v-text-field @click.native="onClick">

methods: {
  onClick({ target: t }) {
    if (
      t.classList.contains('v-messages__message') &&
      t.closest('.v-messages.error--text')
    ) {
      // ну да, кликнули по сообщению об ошибке
    }
  },
},

https://jsfiddle.net/92xcLg0y/