0xD34F

Добавьте в option'ы свойство, которое будет указывать, на что надо умножать price:

options: [
  {
    ...
    propToBeMultipliedByPrice: 'area',
  },
  {
    ...
    propToBeMultipliedByPrice: 'perimeter',
  },
],

И умножайте:

{{ option.price * calc[option.propToBeMultipliedByPrice] }}

Делаете общую функцию фильтрации, где получаете данные из всех фильтров и сравниваете их с элементами. Подключаете эту функцию ко всем фильтрам в качестве обработчика событий, возникающих при взаимодействии с ними пользователя. Например.

преобразовать
['a' => [11, 12], 'b' => [21, 22]]
в
[['a' => 11, 'b' => 12], ['a' =>21, 'b' => 22]]

Совершенно не очевидно, почему результат должен быть таким, как вы показали. Почему 12 из a становится значением свойства b, а 21 - наоборот? Опечатка? - наверное, в a исходного массива лежат значения свойств a результата, аналогично и с b.

array_map(fn($i) => array_combine(array_keys($arr), array_column($arr, $i)), array_keys(array_values($arr)[0]))

{{ dish[`title_${lang}`] }}

или

v-text="dish['title_' + lang]"

или

:text.prop="dish['title_'.concat(lang)]"

const widgetsTransform = Object
  .values(widgets.reduce((acc, n) => ((acc[n.type] = acc[n.type] || []).push(n), acc), {}))
  .map(n => n.length > 1 ? ({ type: `Section${n[0].type}`, children: n }) : n[0]);

не корректно работает

Слово "корректно" тут лишнее. Вообще ни хрена не работает.

Проверка у вас в методе, а методы - знаю, для вас прозвучит весьма неожиданно - их надо вызывать. Чего вы не делаете. Но, разумеется, добавление круглых скобок вам не сильно поможет - вызов будет происходить только при рендеринге, а он со скроллом не связан.

Правильно будет так: добавить свойство, хранящее текущий скролл; обновлять его по событию скролла (нужно повесить соответствующий обработчик на прокручиваемый элемент); назначать классы или чего там вам надо в зависимости от значения этого свойства:

data: () => ({
  scroll: 0,
}),
computed: {
  buttonClass() {
    return что-то, зависящее от значения this.scroll;
  },
},
created() {
  const { body } = document;
  const onScroll = () => this.scroll = body.scrollTop;
  body.addEventListener('scroll', onScroll);
  this.$on('hook:beforeDestroy', () => body.removeEventListener('scroll', onScroll));
},

<button :class="buttonClass"></button>

https://jsfiddle.net/kLwhbec5/

Сравниваете строки вместо чисел. Скрываете элементы, но не показываете их.

$('.price_min_max_btn').click(function() {
  const min = +$('.price_min').val() || 0;
  const max = +$('.price_max').val() || Infinity;

  $('.item_block_filter')
    .hide()
    .filter(function() {
      const price = +this.dataset.price;
      return min <= price && price <= max;
    })
    .show();
});

<div v-if="showHeader">

data: () => ({
  showHeader: +document.querySelector('#app_id').innerHTML === 92,
}),

замените

<div v-for="(story, idx) in stories" :key="idx">

на

<div v-for="n in stories.hits" :key="n.objectID">

.then(this.dates.push(response['dates'] ) ),

Всего одна строка, а столько косяков.

• Синтаксически некорректный мусор - что за запятая на конце? И ещё пересчитайте закрывающие скобки - одна лишняя, здесь, или на две строки ниже.
  
• В then надо передавать функцию. Которая в качестве параметра принимает непонятно откуда берущийся у вас в данный момент response.
  
• Непосредственно в response никакого свойства dates не будет - получаемые данные доступны через свойство data.
  
• Свойство компонента dates, должно, судя по названию, содержать массив дат. Свойство данных ответа dates, судя по названию, содержит массив дат. Так зачем второе засовывать внутрь первого целиком, как один элемент? Надо или заменить значение свойства компонента значением из ответа, или сделать даты из ответа элементами свойства компонента.
  

Исправляем:

.then(response => this.dates = response.data.dates)
// или
.then(response => this.dates.push(...response.data.dates))

Заверните код в класс и создавайте столько экземпляров, сколько потребуется.

https://jsfiddle.net/zx7dqjfp/

Как в данном случае правильно сделать...

Структуру данных менять нельзя

"Правильно" - никак. Непонятно, откуда должен будет взяться section.

Так что структуру данных изменить всё-таки придётся.

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

computed: {
  filteredDialogs() {
    const { dialogs, search } = this;
    return search
      ? dialogs.filter(n => n.fullname.includes(search))
      : dialogs;
  },
},

И избавьтесь от v-if:

v-if="dialogs.length > 0" v-for="(dialog, index) in dialogs"

Во-первых - бессмысленно (если данных нет, и так ничего не будет выведено). Во-вторых.

Потому что его нет. Обновление DOM происходит не сразу же после изменения данных. Используйте nextTick.

И избавьтесь от jquery. Поставьте ref на список:

<ul class="chat--messages__wrapper" ref="messages">

А после добавления данных делайте так:

this.$nextTick(() => {
  const { messages } = this.$refs;
  messages.scrollTop = messages.scrollHeight;
});

def countCarsByBrand(cars, brands):
  return sum(len(v.keys()) for k, v in cars.items() if k in brands)


print(countCarsByBrand(cars, [ 'Audi', 'BMW' ]))

Пусть active вместо индекса содержит ссылку на сам элемент массива:

<div @click="active = subcat" :class="{ active: active === subcat }">

attributes: [], // наполняется посредством rest API

Вот такого не надо. Какая разница, откуда берутся данные? Компоненту об этом знать не надо. Пусть компонент получает массив атрибутов в виде параметра: props: [ 'value' ]; а при необходимости его обновить отдаёт наверх новый массив: this.$emit('input', this.value.map(...)). Это позволит использовать на компоненте директиву v-model: <attributes-list v-model="attributes" />.

document.getElementById(selector).checked = true;

И такого не надо. Манипулировать следует только и исключительно данными. Сделайте метод, который будет получать объект атрибута и новое значение, собирать новый массив данных и дёргать $emit:

methods: {
  update(attr, checked) {
    this.$emit('input', this.value.map(n => n === attr
      ? { ...n, checked }
      : n
    ));
  },
},

<div v-for="n in value">
  <input type="checkbox" :checked="n.checked" @input="update(n, $event.target.checked)">
  <button @click="update(n, true)">Да</button>
  <button @click="update(n, false)">Нет</button>
</div>

Если хотите по прежнему использовать v-model на чекбоксах, то можно собрать объект вида { 'имя/id/ещё что-то уникальное': checked } и завернуть его в Proxy:

computed: {
  attributes() {
    return new Proxy(Object.fromEntries(this.value.map(n => [ n.name, n.checked ])), {
      set: (target, key, val) => {
        this.$emit('input', this.value.map(n => n.name === key
          ? { ...n, checked: val }
          : n
        ));
        return true;
      },
    });
  },
},

<div v-for="(v, k) in attributes">
  <input type="checkbox" v-model="attributes[k]">
  <button @click="attributes[k] = true">Да</button>
  <button @click="attributes[k] = false">Нет</button>
</div>

(?<![\)\]])\b\d+(?=[A-Z])

document.querySelector('table').addEventListener('click', e => {
  const td = e.target.closest('td');
  if (td) {
    const index = td.cellIndex;
    console.log(index);
  }
});

Это если как у вас, речь идёт о ячейках таблицы. В более общем случае можно делать так.