0xD34F

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

Смещение хедера всегда и без всяких проверок будем вычислять как предыдущее значение смещения плюс изменение скролла. И ограничим его с помощью 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()]

Должно быть item.object вместо listItem.object.

Зачем template? Уберите. А v-for перенесите на вложенный элемент.

Дайте-ка угадаю - ваш top глобальный, да? Такой уже есть, вам с таким именем переменной ловить нечего. Меняйте имя, или делайте переменную не глобальной, или делайте свой top свойством какого-нибудь объекта.

let show = 1;

function sh() {
  const [ display, text ] = [ [ 'none', 'Развернуть' ], [ 'block', 'Свернуть' ] ][show ^= 1];
  [...document.querySelectorAll('.list-row')].slice(3).forEach(n => n.style.display = display);
  document.querySelector('#button').textContent = text;
}

window.addEventListener('load', sh);

Рекурсия:

function walk(node) {
  if (node) {
    console.log(node);
    walk(node.next);
  }
}

Или цикл:

function walk(node) {
  while (node) {
    console.log(node);
    node = node.next;
  }
}

.tags li.hidden {
  display: none;
}

document.querySelectorAll('.tags b').forEach(n => {
  n.closest('li').classList.add('xxx');
  n.addEventListener('click', onClick);
});

function onClick(e) {
  for (
    let el = e.target.closest('li');
    (el = el.nextElementSibling) && !el.classList.contains('xxx');
    el.classList.toggle('hidden')
  ) ;
}