0xD34F

Разные классы не нужны, достаточно одного общего:

.ranging {
  display: none;
}

.ranging.opened {
  display: block;
}

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

const buttonSelector = '.selector';
const contentSelector = '.ranging';
const activeClass = 'opened';
const toggleContent = (contents, index) =>
  contents.forEach((n, i) => n.classList.toggle(activeClass, i === index));


// делегирование, назначаем обработчик клика один раз для всех кнопок
// наверное, у них есть какой-то общий предок, тогда вместо документа
// вешать обработчик следует на него:
// document.querySelector('селектор_контейнера_с_кнопками').addEventListener(...
document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const buttons = document.querySelectorAll(buttonSelector);
    const index = Array.prototype.indexOf.call(buttons, button);
    toggleContent(document.querySelectorAll(contentSelector), index);
  }
});

// или, назначаем обработчик клика индивидуально каждой кнопке
const onClick = function(e) {
  toggleContent(this, +e.currentTarget.dataset.index);
}.bind(document.querySelectorAll(contentSelector));

document.querySelectorAll(buttonSelector).forEach((n, i) => {
  n.dataset.index = i;
  n.addEventListener('click', onClick);
});

в created() пишет localStorage или document is not defined <...> nuxt

Я слышал, будто при использовании серверного рендеринга хуки beforeCreate и created выполняются как на сервере, так и на клиенте. Естественно, что на сервере ни localStorage, ни document не будет. Ещё я слышал, что можно проверять, где исполняется код:

if (process.client) {
  // здесь можете пощупать localStorage
}

Документация прочитана, наверно не настолько внимательно, чтобы понять

Не получается понять документацию - можно глянуть исходный код. И если я правильно понял то, что там увидел, то надо ловить события check-in-changed и check-out-changed.

UPD. Ну да, так и есть.

Сложно это всё. Четыре селекта - очень похожие, четыре вычисляемых свойства - очень похожие. Многовато копипасты. Надо упростить.

Первым делом внимательно посмотрим на все эти похожие куски кода, найдём, где они отличаются, и на основе этих отличий сделаем описание фильтров:

filters: [
  { name: 'calculator.brand_filter', getter: obj => obj.brand.name, value: '' },
  { name: 'calculator.company_filter', getter: obj => obj.company.name, value: '' },
  { name: 'calculator.country_filter', getter: obj => obj.brand.country, value: '' },
  { name: 'calculator.side_filter', getter: obj => obj.sides, value: '' },
],

Затем сделаем собственно фильтрацию, пропустим данные через массив фильтров (если значение фильтра выставлено - производится фильтрация, нет - оставляем данные как есть):

computed: {
  filteredProfiles() {
    return this.filters.reduce((profiles, { value, getter }) => {
      return value
        ? profiles.filter(n => getter(n) === value)
        : profiles;
    }, this.profiles);
  },

Далее, надо дать пользователю возможность задавать значения фильтров. Сделаем компонент фильтра:

Vue.component('filter-select', {
  props: [ 'name', 'options', 'value' ],
  template: `
<div>
  <p>{{ name }}<p>
  <select :value="value" @change="$emit('input', $event.target.value)">
    <option value="">-</option>
    <option v-for="n in options">{{ n }}</option>
  </select>
</div>`
});

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

computed: {
  filterOptions() {
    return this.filters.map(n => [...new Set(this.profiles.map(n.getter))]);
  },

Наконец, создадим сами фильтры:

<filter-select
  v-for="(n, i) in filters"
  v-model="n.value"
  :options="filterOptions[i]"
  :name="trans(n.name)"
></filter-select>

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

methods: {
  resetFilters() {
    this.filters.forEach(n => n.value = '');
  },

<button @click="resetFilters">{{ trans('calculator.reset_filter') }}</button>

Демо можно посмотреть здесь (да, тут меньше фильтров, чем у вас - ну так вы свои данные не показали, а у меня воображения на большее не хватило).

Добавляете в компонент свойство brand. И используете его в качестве значения для своего select'а, а метод handleBrand вырезаете:

<select v-model="brand" class="custom-select">

Делаете ещё одно вычисляемое свойство - отфильтрованные элементы из profiles, чей brand.name равен brand:

filteredProfiles() {
  return this.profiles.filter(n => n.brand.name === this.brand);
},

Ну и выводите эти отфильтрованные элементы:

<div v-for="profile in filteredProfiles" class="row feed">

pointer-events: none для #box и pointer-events: all для :before и button

ну например - с использованием react-yandex-maps

.tab-content__item {
  display: none;
}

.tab-content__item.active {
  display: list-item;
}

.tab-header__item.active {
  color: red;
}

const headerSelector = '.tab-header__item';
const contentSelector = '.tab-content__item';
const activeClass = 'active';


// делегирование, обработчик клика добавляется один раз для всех хедеров;
// контент, соответствующий нажатому хедеру, определяем через равенство data-атрибутов
document.addEventListener('click', e => {
  const header = e.target.closest(headerSelector);
  if (header) {
    const { tab } = header.dataset;
    const toggle = n => n.classList[n.dataset.tab === tab ? 'toggle' : 'remove'](activeClass);
    document.querySelectorAll(headerSelector).forEach(toggle);
    document.querySelectorAll(contentSelector).forEach(toggle);
  }
});

// или, обработчик клика добавляется каждому хедеру индивидуально;
// контент, соответствующий нажатому хедеру, определяем по равенству индексов
const headers = document.querySelectorAll(headerSelector);
const contents = document.querySelectorAll(contentSelector);

headers.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const index = Array.prototype.indexOf.call(headers, this);
  const toggle = (n, i) => n.classList[i === index ? 'toggle' : 'remove'](activeClass);
  headers.forEach(toggle);
  contents.forEach(toggle);
}

замените append на text

а ещё замените i * 4000 на (i * 2 + 1) * 1000 - чтобы таймауты не совпадали

map.events.add('boundschange', function(e) {
  const
    newZoom = e.get('newZoom'),
    oldZoom = e.get('oldZoom');

  if (newZoom !== oldZoom) {
    ...
  }
});

ionRangeSlider, например:

<input id="min" type="number" value="25"> -
<input id="max" type="number" value="75">

<div id="range"></div>

const values = {
  min: 0,
  max: 100,
};

const range = $('#range').ionRangeSlider({
  type: 'double',
  grid: true,
  ...values,
  onChange(e) {
    $('#min').val(e.from);
    $('#max').val(e.to);
  },
}).data('ionRangeSlider');

$('#min, #max').attr(values).on('input', function() {
  const v = [ $('#min').val(), $('#max').val() ]
    .sort((a, b) => a - b)
    .map(n => Math.max(values.min, Math.min(values.max, +n)));

  $('#min').val(v[0]);
  $('#max').val(v[1]);

  range.update({
    from: v[0],
    to: v[1],
  });
}).trigger('input');

jquery-ui slider тоже подойдёт:

<input id="min" type="number" value="25"> -
<input id="max" type="number" value="75">

<div id="range"></div>

const values = {
  min: 0,
  max: 100,
};

$('#range').slider({
  range: true,
  ...values,
  slide(e, ui) {
    $('#min').val(ui.values[0]);
    $('#max').val(ui.values[1]);
  },
});

$('#min, #max').attr(values).on('input', function() {
  const v = [ $('#min').val(), $('#max').val() ]
    .sort((a, b) => a - b)
    .map(n => Math.max(values.min, Math.min(values.max, +n)));

  $('#min').val(v[0]);
  $('#max').val(v[1]);

  $('#range').slider('values', v);
}).trigger('input');

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

Скрытие телефонов будет выглядеть так:

const reg = new RegExp(`(.+).{${symbolsForHide}}$`);
$('.phone_number')
  .attr('data-phone', function() {
    return $(this).text()
  })
  .text((i, text) => text.replace(reg , '$1...'));

А код обработчика клика кнопки показа так:

const
  $this = $(this),
  $phone = $this.siblings('.phone_number'),
  phone = $phone.data('phone');

$phone.text(phone).attr('href', `tel: ${phone}`);
$this.remove();

https://jsfiddle.net/431j80t7/

выбирайте

:license="{
  old_price: 20,
  price: 200,
  title: 2,
}"

Ну и остальные аналогично.

Сделайте вычисляемое свойство:

computed: {
  brands() {
    return [...new Set(this.profiles.map(n => n.brand.name))];
  },
},

<option v-for="brand in brands" :value="brand">{{ brand }}</option>

Местами роуты поменяйте. Используется первый подошедший, а не тот, который вы у себя в голове полагаете правильным.

const uidValue = 100;

const { id = 'нет такого элемента' } = document.querySelector(`[uid="${uidValue}"]`) || {};

const router = new VueRouter({
  routes: [
    { path: '/',    component: { template: '<div>Home</div>' } },
    { path: '/foo', component: { template: '<div>Foo</div>'  } },
    { path: '/boo', component: { template: '<div>Boo</div>'  } },
  ],
});

new Vue({
  router,
  el: '#app',
  data: () => ({
    routeIndex: 0,
  }),
  created() {
    setInterval(() => {
      const { routes } = this.$router.options;
      this.routeIndex = (this.routeIndex + 1) % routes.length;
      this.$router.push(routes[this.routeIndex]);
    }, 1000);
  },
});

<div id="app">
  <router-view></router-view>
</div>

const key = 'prop';
const val = 1;

const result = array.flatMap(n => n.filter(m => m[key] === val));

// или

const result = array.reduce((acc, n) => (
  n.forEach(m => m[key] === val && acc.push(m)),
  acc
), []);

// или

const result = [];

for (const n of [].concat(...array)) {
  if (n[key] === val) {
    result[result.length] = n;
  }
}

Читаем документацию внимательнее, там сказано, что геттер

получает следующие аргументы <...> При определении в модуле

state,       // при использовании модулей — локальный state модуля
getters,     // локальные геттеры текущего модуля
rootState,   // глобальный state
rootGetters  // все геттеры

Особое внимание - на четвёртый параметр.