0xD34F

Object.values(tasks.reduce((acc, { user: { id, name }, ...n }) => {
  (acc[id] = acc[id] || { user: { id, name, tasks: [] } }).user.tasks.push(n);
  return acc;
}, {}))

вычисляемое свойство сделать, конечно же:

computed: {
  sortedUsers() {
    return [...this.users].sort((a, b) => a.name.localeCompare(b.name));
  },
},

options: {
  cutoutPercentage: 90,
},

Это [object Object], дефолтное строковое представление объектов. Если первый аргумент, переданный в JSON.parse, не является строкой, он будет в строку преобразован. Вы пытаетесь распарсить объект. Нет необходимости использовать JSON.parse, всё уже как надо.

Добавлять запятую в зависимости от индекса текущего элемента:

<span v-for="(n, i) in names">{{ n }}{{ i < n.length - 1 ? ', ' : '' }}</span>

Или к чёрту v-for, склеить массив в строку и вывести в один span:

<span v-text="names.join(', ')"><span>

Как-то сложно всё выглядит, даже разбирать лень. Так что вместо "починки" напишем заново.

Смещение хедера всегда и без всяких проверок будем вычислять как предыдущее значение смещения плюс изменение скролла. И ограничим его с помощью Math.min/Math.max (0/минус высота элемента). Применять смещение будем когда position имеет значение fixed.

Установка значения position в зависимости от скролла. Тут три случая: скролл превышает высоту хедера - fixed; скролл равен 0 - absolute; в остальном - без изменений.

Соответственно, вместо пяти свойств достаточно всего двух: смещение хедера и предыдущее значение скролла.

https://jsfiddle.net/dsbj3h4c/

Складываем данные кнопок и блоков в массив, также добавляем в компонент свойство - ссылку на активный элемент массива (это чья кнопка должна получить класс active и класс которого надо назначить блоку):

data: () => ({
  items: [
    { buttonTitle: '...', blockClass: '...' },
    { buttonTitle: '...', blockClass: '...' },
    ...
  ],
  active: null,
}),

На основе массива создаём кнопки, по клику устанавливаем значение активного элемента:

<button
  v-for="n in items"
  :class="{ active: active === n }"
  @click="active = n"
>{{ n.buttonTitle }}</button>

Соответственно, если активный элемент не null - показываем блок, назначая ему класс:

<div v-if="active" :class="[ 'block', active.blockClass ]">

https://jsfiddle.net/bwmk7f1t/

изменяя что-то в одном компоненте, меняется во всех

Вам следует изменить структуру данных в хранилище - так, чтобы можно было держать там данные сразу для нескольких экземпляров mortgage-list. Сделайте объект, ключами будут id (те, что вы используете в качестве key - они ведь уникальные, правда же?). Ну а значениями - объекты с данными для отдельного экземпляра. В сам компоненте mortgage-list надо добавить вычисляемое свойство, где по id из хранилища будет извлекаться нужный объект.

withLatestFrom

UPD. https://stackblitz.com/edit/angular-govuo1

$k = array_keys($arr);
$v = array_values($arr);
sort($k);
sort($v);
$arr = array_combine($k, $v);

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

const items = [
  { id: ..., title: '...', img: '...' },
  { id: ..., title: '...', img: '...' },
  ...
];

И передаём их в компонент сладйера:

function Slider({ items }) {
  const [ active, setActive ] = React.useState(0);
  const { length, [active]: slide } = items;

  const next = e => setActive((active + +e.target.dataset.step + length) % length);
  const goTo = e => setActive(+e.target.dataset.index);

  return (
    <div>
      <div className="slideshow-container">
        <div className="mySlides fade">
          <div className="numbertext">{active + 1} / {length}</div>
          <img src={slide.img} />
          <div className="text">{slide.title}</div>
        </div>
        <a className="prev" onClick={next} data-step={-1}>&#10094;</a>
        <a className="next" onClick={next} data-step={+1}>&#10095;</a>
      </div>
      <div className="dots">
        {items.map((n, i) => (
          <span
            key={n.id}
            className={`dot ${i === active ? 'active' : ''}`}
            onClick={goTo}
            data-index={i}
          ></span>
        ))}
      </div>
    </div>
  );
}

https://jsfiddle.net/yht2w68L/

const pick = (obj, keys) => keys.reduce((acc, n) => (acc[n] = obj[n], acc), {});

const newObj = pick(obj, [ 'username', 'age' ]);

или

const pick = (obj, ...keys) => Object.fromEntries(keys.map(n => [ n, obj[n] ]));

const newObj = pick(obj, 'username', 'age');

Задайте отрицательный animation-delay. Или поверните .container через transform: rotate.

Крутое у вас там условие в цикле:

1 < imageData.data.length

Может, всё-таки не 1, а i?

Примерно так. Примерно, да - для некоторых значений ширины/высоты придётся вручную подгонять left/top у ::after.

Я вот слышал, будто require.context может принимать какой-то четвёртый параметр по имени mode, у которого значение по умолчанию вовсе НЕ 'lazy'.

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

function App() {
  const [ count, setCount ] = useState(3);
  const updateCount = ({ target: { dataset: { change } } }) =>
    setCount(Math.max(0, count + +change));

  const refs = useRef([]);
  const logRefs = () => console.log(refs.current);

  useEffect(() => {
    refs.current.length = count;
  }, [ count ]);

  return (
    <div>
      <button onClick={updateCount} data-change={-1}>-</button>
      {count}
      <button onClick={updateCount} data-change={+1}>+</button>
      <button onClick={logRefs}>log refs</button>
      {Array.from({ length: count }, (n, i) => (
        <div ref={el => refs.current[i] = el}>
          {Math.random() * 1000 | 0}
        </div>
      ))}
    </div>
  );
}

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

<label v-for="f in filters">
  <input type="checkbox" v-model="f.checked">
  {{ f.name }}
</label>

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

computed: {
  filteredFood() {
    const filters = this.filters.filter(n => n.checked).map(n => n.code);
    return this.meatFood.filter(n => filters.some(f => n[f]));
  },
},

UPD. Структура данных конечно странная - зачем отдельные булевы свойства для состава продукта не очень понятно. Почему бы не одно свойство, массив, где этот самый состав будет просто перечислен?

При клике на элемент - я сохраняю текущий элемент в store vuex и перехожу по роуту...

Вот и корень ваших проблем. Не надо ничего сохранять при клике. Просто переходите. А компонент, отображающий детальную информацию - пусть он сам разбирается, что и как. Получает в качестве параметра идентификатор объекта, который должен отобразить, и запрашивает нужные данные. Ну и watch на идентификатор - чтобы при его смене данные также обновлялись.

UPD. Если все данные на клиенте уже есть, то вообще ничего не надо, кроме одного вычисляемого свойства в Detail, где по id (или что там у вас) будет из vuex извлекаться нужный объект.

Object.values(arr.reduce((acc, n) => {
  const date = n.date.split(' ', 1)[0];
  (acc[0][date] = acc[0][date] || { id: ++acc[1], date, docs: [] }).docs.push(n);
  return acc;
}, [ {}, 0 ])[0])

или

[...arr.reduce((acc, n) => {
  const [ date ] = n.date.match(/\S+/);
  acc.set(date, acc.get(date) || { id: -~acc.size, date, docs: [] }).get(date).docs.push(n);
  return acc;
}, new Map).values()]