0xD34F

<div class="icon"></div>

.icon {
  font-size: 60px;
  display: inline-block;
  border: 0.1em solid black;
  border-radius: 0.5em;
  width: 1em;
  height: 2em;
  position: relative;
}

.icon::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 0.2em;
  height: 0.2em;
  background: black;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  box-shadow: 0 -0.4em black, 0 0.4em black;
}

.icon::after {
  content: "";
  display: inline-block;
  border: 0.15em solid black;
  border-left: 0;
  border-top: 0;
  width: 0.4em;
  height: 0.4em;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

https://jsfiddle.net/udygv7xr/

Объявление функции codeAddress - уберите цикл; в саму функцию передавайте адрес в качестве параметра:

function codeAddress(address, geocoder, map) {
  geocoder.geocode({ address }, function(results, status) {
    if (status === 'OK') {
      new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

В initMap перебирайте массив адресов, для каждого вызывайте codeAddress:

address.forEach(n => codeAddress(n, geocoder, map));

как установить страницу пагинации (к примеру 2-ую или 3-ю)

Добавляете в компонент свойство page:

data: () => ({
  page: 1,
  ...
}),

Цепляете его к таблице:

<v-data-table
  :page.sync="page"
  ...

Дальше просто устанавливайте значение page - таблица будет показывать соответствующую страницу.

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

Не надо обработчиков клика. Следите за значением page:

watch: {
  page(val) {
    ...
  },
},

computed: {
  done() {
    return this.todos.filter(n => n.done);
  },
},

<ol v-if="done.length">
  <li v-for="n in done" v-text="n.text"></li>
</ol>

Ключевое слово в качестве имени свойства? Умно, ничего не скажешь.

Перед кем и что надо добавить:

const elements = document.querySelectorAll('li > ul');
const tag = 'span';
const text = 'hello, world!!';

Добавляем:

elements.forEach(n => {
  n.before(document.createElement(tag));
  n.previousSibling.textContent = text;
});

или

for (const n of elements) {
  const el = document.createElement(tag);
  el.innerText = text;
  n.parentNode.insertBefore(el, n);
}

или

for (let i = 0; i < elements.length; i++) {
  elements[i].insertAdjacentHTML('beforebegin', `<${tag}>${text}</${tag}>`);
}

или

(function insert(i, n = elements.item(i)) {
  if (n) {
    const el = document.createElement(tag);
    el.appendChild(new Text(text));
    n.insertAdjacentElement('beforebegin', el);
    insert(-~i);
  }
})(0);

О каких элементах и атрибутах идёт речь:

const selector = '.list-item';
const key1 = 'pagereview';
const key2 = 'pageslug';
const attr1 = `data-${key1}`;
const attr2 = `data-${key2}`;

Получаем элементы:

const $elements = $(selector);

// или

const elements = document.querySelectorAll(selector);

Переключаем их видимость:

$elements.show().filter((i, n) => $(n).data(key1) !== $(n).data(key2)).hide();

// или

$elements.each(function() {
  const $this = $(this);
  $this.toggle($this.attr(attr1) === $this.attr(attr2));
});

// или

elements.forEach(n => {
  n.hidden = n.getAttribute(attr1) !== n.getAttribute(attr2);
});

// или

for (const { style, dataset } of elements) {
  style.display = dataset[key1] === dataset[key2] ? 'block' : 'none';
}

// или (в стили надо будет добавить .hidden { display: none; })

for (let i = 0; i < elements.length; i++) {
  const { classList: c, attributes: a } = elements[i];
  c.toggle('hidden', a[attr1].value !== a[attr2].value);
}

:options="{ scrollWheelZoom: false }"
@update:zoom="zoom = $event"
@wheel.native="onWheel"

methods: {
  onWheel(e) {
    if (e.deltaY < 0) {
      this.zoom++;
      e.preventDefault();
    }
  },
},

data: () => ({
  columns: [ 'aaa', 'bbb', 'ccc' ],
  repeat: 5,
}),
computed: {
  repeatedColumns() {
    return Array(this.repeat).fill(this.columns).flat();
  },
},

<td v-for="n in repeatedColumns">{{ n }}</td>

Добавьте в 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]);

Второе:

const widgetsTransform = widgets
  .reduce((acc, n, i, a) => (
    (i && n.type === a[~-i].type) || acc.push([]),
    acc[~-acc.length].push(n),
    acc
  ), [])
  .map(n => ~-n.length ? ({ 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))