0xD34F

Сначала надо данные select'ов сложить во вложенную структуру, подобную текущему списку: массив объектов, каждый из которых содержит значение пункта select'а и аналогичный массив, описывающий следующий select.

Изначально доступен только первый select (остальные скрыты, неактивны, не имеют option'ов или их вообще нет).

При выборе значения в select'е все select'ы, которые расположены за ним - удаляются, скрываются, деактивируются или обнуляются. Из оставшихся извлекаются значения, которые используются для поиска массива, описывающего следующий select. Берём одно значение, ищем в массиве данных select'ов объект с соответствующим значением. Нашли - берём следующее значение и вложенный массив найденного объекта. Повторяем до тех пор, пока значения не закончатся. Последний полученный массив используется для создания или заполнения option'ами следующего select'а - если он (массив) есть и непустой. В противном случае было выбрано значение в последнем возможном select'е, можно на основе полного комплекта значений предпринять какое-то действие.

https://jsfiddle.net/uy3t4d1b/

Можно сделать вычисляемое свойство с сеттером:

computed: {
  all: {
    get() {
      return this.filters.every(n => n.active);
    },
    set(val) {
      this.filters.forEach(n => n.active = val);
    },
  },
},

<label>
  <input type="checkbox" v-model="all">
  ALL
</label>

https://jsfiddle.net/c3b91erk/

https://jsfiddle.net/g53Led6h/

или

https://jsfiddle.net/g53Led6h/1/

Передавайте в мутацию не весь объект, а только ту его часть, которую собираетесь обновить:

this.$store.commit('updateProduct', {
  product: product.options,
  data: {
    isFree: true,
  },
});

В противном случае, необходимо выполнять рекурсивное слияние свойств объектов. Если не готовы реализовывать подобное самостоятельно, воспользуйтесь каким-нибудь уже существующим решением, например.

Добавим в компонент описание фильтров. Это будет массив объектов, содержащих два свойства: имя (совпадает с именем свойства в элементах фильтруемого массива) и активность (указывает, надо ли применять это фильтр):

data: () => ({
  filters: [
    { name: 'disColor', active: true },
    { name:    'water', active: true },
    { name:      'gps', active: true },
  ],
  ...

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

<label v-for="f in filters">
  <input type="checkbox" v-model="f.active">
  {{ f.name }}
</label>

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

computed: {
  filteredItems() {
    const filters = this.filters.filter(n => n.active);
    return this.items.filter(n => filters.some(f => n[f.name]));
  },
  ...

https://jsfiddle.net/276xgmho/

throttle:

computed: {
  text: {
    get() {
      // ...
    },
    set: _.throttle(function(text) {
      // здесь вызываете мутацию
    }, 2000),
  },
},

https://jsfiddle.net/hjub5swz/

Попапов много; свойство, управляющее их видимостью одно и по своему типу является логическим. Как вы собираетесь, имея в распоряжении всего два значения, управлять отображением 2, 3, 5, 1000 и т.д. элементов? Можно только показать всё/спрятать всё - поэтому вы и видите всегда последний элемент.

Разметку попапа выносите из цикла. Вместо логического значения храните объект (элемент watches, который хотите показать) или null (если в данный момент ничего показывать не надо):

data() {
  return {
    show: null,
    ...

Открытие попапа: @click="show = watch". Закрытие: @click="show = null". В шаблоне попапа исправляете watch на show: :src="`img/catalog/${show.model}/group.jpg`".

правильно ли я все понял?

нет

"Получить стандартное событие" - откуда вы это взяли? Испытываете проблемы с пониманием английского текста - можете попробовать русский вариант.

.button:hover {
  animation: hover 2s linear;
}
@keyframes hover {
  0%, 50% {
    opacity: 0.5;
  },
  100% {
    opactity: 1;
  }
}

https://codepen.io/anon/pen/mZVrxO?editors=1100

Я бы попробовал добавить массив имён обрабатываемых элементов.

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

data: () => ({
  componentNames: [ 'comp1', 'comp2', 'comp3', 'comp4' ],
  ...
}),
computed: {
  componentName() {
    return [ 1, 2 ].includes(this.Q) && this.componentNames[this.B - 1];
  },
},

<component :is="componentName"></component>

UPD. Если дополнительно нужно передавать параметры, то в массиве можно хранить вместо имён компонентов объекты, которые будут содержать имя и набор параметров:

data: () => ({
  components: [
    { name: '...', props: { ... } },
    { name: '...', props: { ... } },
    ...
  ],
  ...
}),

Вычисляемое свойство не изменится (за исключением имени, конечно), а шаблон станет выглядеть так:

<component
  v-if="component"
  :is="component.name"
  v-bind="component.props"
></component>

https://jsfiddle.net/69xv0b47/

Очевидно, надо добавить ещё одно свойство, которое будет отвечать за выбранный подраздел.

https://jsfiddle.net/w0vrxcyg/2/

Не задана высота для row, row непонятно зачем вложен в ещё один row. Исправлено.

В currentImg лежит строка. Соответственно, и при сложении тоже строка получается. То есть, номер слайда, к которому вы пытаетесь перейти, вместо 2 оказывается 11.

В качестве заплатки на скорую руку можно преобразовывать значение к числу:

this.currentImg = Math.min(+this.currentImg + 1, this.maxImages - 1);

Ну а по-хорошему - вам следует разобраться, почему там строка вместо числа, и исправить это.

$('#results').on('change', 'tr', function(e) {
  console.log(e, $(this).data('xxx'));
});

function displayLine(data) {
  $('#results').append($(`
    <tr>
      <th scope="row">${importLines.length}</th>
      <td><input class="checkbox" type="checkbox"></td>
      <td>${data[0]}</td>
      <td>${data[2]}</td>
      <td>${data[11]}</td>
      <td id="status-${data[0]}"><b><span style="color: orange">PENDING</span></b></td>
    </tr>
  `).data('xxx', data));
}

Сделаем метод, который будет обрабатывать клики по всему документу. Логика такая - если целевой элемент не лежит внутри корневого элемента экземпляра компонента, значит можно закрывать:

onClickOutside(e) {
  if (!this.$el.contains(e.target)) {
    // закрываем дропдаун
  }
},

Назначаем обработчик при создании экземпляра, перед уничтожением снимаем:

created() {
  const { onClickOutside } = this;
  document.addEventListener('click', onClickOutside);
  this.$on('hook:beforeDestroy', () => document.removeEventListener('click', onClickOutside));
},

https://jsfiddle.net/8ugxwf7k/

if(currentSlide == 2){

Забыли this. Не только тут - везде, где обращаетесь к currentSlide внутри методов.

this.el.style.backgroundImage = ...

А вот это лишнее (да и называется это свойство немного иначе). Работать с DOM напрямую не следует; кроме того, background у вас уже назначается в шаблоне - вот там его надо заменить на backgroundImage.

photos: {

Лучше сделать массивом, так гораздо проще.

https://jsfiddle.net/k9fqha3u/

Проблема явно в строке
<li v-for="array in filterBy(arrays, input)">

Да, надо добавить имя свойства, по которому хотите фильтровать, третьим параметром.

Или можно обойтись без сторонних библиотек и оформить отфильтрованные данные как computed свойство.

https://jsfiddle.net/jbd5amvo/

Я взял вот этот листинг:

https://next.vuetifyjs.com/ru/components/lists

В консоли ошибка :

[Vue warn]: Unknown custom element

Может, у вас vuetify версии 1.x, в то время как документацией пользуетесь от второй? - некоторые компоненты были переименованы.