0xD34F

Попапов много; свойство, управляющее их видимостью одно и по своему типу является логическим. Как вы собираетесь, имея в распоряжении всего два значения, управлять отображением 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/

Если речь действительно идёт об одном и том же массиве, то mainArray.filter(n => n !== example).

Если же имеются в виду разные массивы с одинаковым содержимым, то давайте сделаем функцию, проверяющую, что содержимое массивов совпадает:

const compareArrays = (a, b) =>
  a.length === b.length && a.every((n, i) => Object.is(n, b[i]));

И тогда можно будет делать так: mainArray.filter(n => !compareArrays(n, example)).

Не задана высота для 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, в то время как документацией пользуетесь от второй? - некоторые компоненты были переименованы.

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

https://jsfiddle.net/w0vrxcyg/1/

нужно пройтись в сторе по массиву найти у какого объекта stepConditions.active === true ему поставить false, а следующему объекту в stepConditions.active выставить true

Если активен может быть только один элемент - наверное, не надо указывать активность каждого элемента, храните отдельно индекс активного. Разве так не будет проще?

Ну а отвечая непосредственно на ваш вопрос:

case OPEN_NEXT_EXPRESS_FORM_STEP:
  const active = 1 + state.findIndex(n => n.stepConditions.active);
  return active ? state.map((n, i) => ({
    ...n,
    stepConditions: {
      ...n.stepConditions,
      active: i === active,
    },
  })) : state;

или

case OPEN_NEXT_EXPRESS_FORM_STEP:
  return state.map((n, i, arr) => ({
    ...n,
    stepConditions: {
      ...n.stepConditions,
      active: !!(i && arr[i - 1].stepConditions.active),
    },
  }));

arr.propertyIsEnumerable(length)
// => true

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

UPD. Могу предположить, что за length там у вас - если вы сами её не объявляли, это window.length.

Странный вопрос. Что в коде написали - то и происходит. Нет у вас там никакого добавления в массив. Если хотите, чтобы text был массивом, тогда делайте так:

$keyboard['keyboard'][$i]['text'][] = $buttons[$i];

При каждом ресайзе у вас вызывается sandwitch, в котором назначается обработчик клика. Отресайзили окно 10 раз - вот вам 10 обработчиков.

Не очень понятно, зачем вообще тут нужно отслеживать ресайз - вешайте обработчик сразу, и уже внутри него проверяйте ширину окна, как-то так:

$(document).on('click', '.sandwitch', function () {
  if ($(window).width() < 520) {
    $(this).toggleClass('sandwitch--active');
    $('.main-menu-list').slideToggle();
  }
});