0xD34F

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

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

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">

выбирайте

: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 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>

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

if (!this.map) {
  this.map = DG.map(...);
  this.marker = DG.marker(...);
} else {
  this.map.panTo(...)
  this.marker.setLatLng(...);
}

https://jsfiddle.net/o04vc57k/

Через обертку <div class="container-avatar"><Avatar/></div> - в этом варианте лишний html елемент

Что мешает добавлять класс непосредственно экземпляру компонента? Вполне себе рабочий вариант.

Добавьте свойство flightsData, куда будете складывать данные, изначально - пустой массив.

Выводите его содержимое в шаблоне, например:

<div v-for="item in flightsData">
  <div>Price: {{ item.price }}</div>
  <div v-for="f in item.flights">
    <div>Departure: {{ f.cities.departureCity }}, {{ f.departureTime }}</div>
    <div>Arrival: {{ f.cities.arrivalCity }}, {{ f.arrivalTime }}</div>
  </div>
</div>

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

this.flightsData = response.data.filter(n => val.includes(n.flights[0].airline.code));

пишет ошибку что свойства id нету

А так ли это на самом деле? Вместо пересказа следует текст ошибки показывать. Почему-то уверен, что у вас там не id отсутствует, а не получается достать id из отсутствующего объекта, типа "Cannot read property 'id' of undefined". В случае отсутствия объектов подсовывайте пустые:

isShow() {
  return ((this.getProject() || {}).creator || {}).id === this.user.id;
},

как в другом компоненте дождаться пока метод fetch() положит данные с store?

Условный рендеринг - добавьте v-if="данные" тому элементу/компоненту, что эти данные использует.

При удалении в splice надо указывать индекс, а не сам элемент:

methods: {
  select(airline) {
    const index = this.selected.indexOf(airline);
    if (index !== -1) {
      this.selected.splice(index, 1);
    } else {
      this.selected.push(airline);
    }
  },
},

Свойство checkedAll должно быть вычисляемым, с сеттером:

computed: {
  checkedAll: {
    get() {
      return this.airlines.every(n => this.selected.includes(n.name));
    },
    set(val) {
      this.selected = val ? this.airlines.map(n => n.name) : [];
    },
  },
},

AJAX запрос <...> нужен watch?

Можно так, да.

что лучше использовать

axios

data: () => ({
  items: [
    { active: false, text: '...' },
    { active: false, text: '...' },
    ...
  ],
}),

<div
  v-for="n in items"
  v-text="n.text"
  :class="[ { active: n.active }, 'toggle' ]"
  @click="n.active = !n.active"
></div>

UPD. Вынесено из комментариев:

а как сделать чтобы не городить кучу даныx в data?

Типа, лучше городить ещё большую кучу html кода? Нет, так дела не делаются. По крайней мере, при использовании vue, тут данные первичны.

Хотя, можно и без данных - если вы разметку генерите автоматически, без копипасты:

data: () => ({
  itemsCount: 5,
  active: [],
}),
methods: {
  toggle(item) {
    const i = this.active.indexOf(item);
    if (i === -1) {
      this.active.push(item);
    } else {
      this.active.splice(i, 1);
    }
  },
},

<div
  v-for="i in itemsCount"
  v-text="`Item ${i}`"
  :class="[ { active: active.includes(i) }, 'toggle' ]"
  @click="toggle(i)"
></div>

Чето я вообще ничего найти не могу.

Плохо искали. Нужная информация есть прямо в разделе документации, посвящённом render-функции.

Добавим два свойства - количество элементов на странице (т.е., сколько элементов следует показывать единовременно) и номер текущей страницы:

perPage: 10, // или 20, или 50, это вам виднее... да и настраиваемым можно его сделать
page: 1,

Затем добавим пару вычисляемых свойств - количество страниц и элементы текущей страницы:

pages() {
  return Math.ceil(this.items.length / this.perPage);
},
pageData() {
  const end = this.page * this.perPage;
  return this.items.slice(end - this.perPage, end);
},

И отобразим элементы:

<div v-for="item in pageData">
  ...

Также сделаем методы для переключения страниц - по номеру и относительно текущей страницы...

goTo(page) {
  this.page = Math.max(1, Math.min(this.pages, page));
},
next(change) {
  this.goTo(this.page + change);
},

...чтобы дать пользователю возможность просмотреть все данные:

<button @click="goTo(1)">в начало</button>
<button @click="next(-1)">предыдущая страница</button>
<button @click="next(+1)">следующая страница</button>
<button @click="goTo(pages)">в конец</button>

https://jsfiddle.net/dkb5wej1/

Числа как строки сравниваете. Так что да, '2' > '10', всё правильно.

Что делать? Ну, очевидно - сравнивайте числа как числа. Придётся усложнить метод сортировки, чтобы он умел понимать, с каким типом данных работает. Или, если лень переделывать, можно по-быстрому закостылить: числа сразу превращать в строки, результат сравнения которых будет таким же, как у чисел - дополните их нулями спереди.

UPD. Массив items, передаваемый в мутацию saveSort, содержит те же объекты, что и массив itemsList из стейта, так что никакого find здесь не надо:

mutations: {
  saveSort: (state, items) => items.forEach((n, i) => n.sort = i),
},

А чего непонятно-то? Функция принимает элемент items, должна вернуть значение.

Сама функция может быть методом компонента:

:item-value="itemValue"

methods: {
  itemValue() {
    ...

UPD. Всё ещё непонятно? Ну вот вам небольшой примерчик (сделан на основе первой же демки из документации).

А какая разница, pug у вас или не pug? Всё как обычно:

p test: {{ isNewDesign }}

mounted не подходит так как, он вызывается при каждом переходе

Если использовать keep-alive, mounted (так же, кстати, как и created - инициировать загрузку данных лучше в нём) будет вызван один раз.

Или можете использовать vuex для хранения данных, и при создании экземпляра компонента проверять их наличие.

В v-model должен быть массив, а не состояние конкретного чекбокса; кроме того, чекбоксам следует указать значения. Есть же пример в документации. Соответственно, ваш код можно (но не факт, что нужно) переписать как-то так, например.

getOneProfile: state => {
  return state.profile
}

{{ getOneProfile.profile.name }}

То есть, у state.profile есть свойство profile? Типа, можно было бы и $store.state.profile.profile.name написать? Подозреваю, что profile всё-таки лишний. Ну и чтобы не пытаться выводить данные, которых пока нет, используйте условный рендеринг:

<КакойТоКомпонент v-if="данные">

UPD. Вынесено из комментариев:

Я думал, нужно делать какой то лоадер, пока данные идут?

Ну сделайте:

<КакойТоКомпонент v-if="данные" />
<ИндикаторЗагрузки v-else />