0xD34F

Вариант попроще - заворачиваем весь список в transition-group, у отдельных элементов списка анимируем высоту (должна быть задана).

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

погуглил за вас

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

Тут сама сложность в том чтоб сделать бордер.

погуглил за вас ещё раз

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

chart: {
  events: {
    click() {
      this.update({
        yAxis: {
          breaks: новое значение для breaks,
        },
      });
    },
  },
},

jsfiddle.net/oyrv6a1d

<div class="colors">
  <div class="color" data-color="blue">Blue</div>
  <div class="color" data-color="red">Red</div>
  <div class="color" data-color="pink">Pink</div>
</div>

let selectedTD = null;

const $colors = $('.colors').on('click', '.color', function() {
  $(selectedTD).css('backgroundColor', this.dataset.color);
  selectedTD = null;
  $colors.hide();
}).hide();

$('table').on('click', 'td', function() {
  selectedTD = selectedTD === this ? null : this;
  $colors.toggle(!!selectedTD);
});

Всё работает так, как и должно. Хотите, чтобы обработчик вызывался при потере фокуса - onChange замените на onBlur.

gatAllPosts: function () {

this.get.AllPosts

Круто.

как решить проблему?

Глаза протереть. Два раза написали имя метода - два раза опечатались. Не стыдно сюда с такой ерундой приходить?

Ну и это самое, методы - их вызывают. Где круглые скобки после getAllPosts в created?

...или есть какой-то скрытый от меня смысл?

Есть:

It will handle cases with Symbol.toPrimitive correctly and throw correctly if template literal expression is a Symbol(). See babel/babel#5791.

if (winnerCombination.some(n => n.every(m => filledX.includes(m)))) {
  ...

Точно так же проверяется и filledO (можно сделать функцию, которая будет принимать массив для проверки).

Ну и конечно в filledX/filledO надо класть не строки (как это сейчас происходит), а числа.

Импорт React.Component.

Для чего? - Ну, ОЧЕВИДНО, чтобы использовать его при определении классового компонента.

Подключаете файл v-show-slide.js из папки dist.

Затем Vue.use(window['v-show-slide'].default);.

.images_box-model-spec {
  order: 1;
}

.itemsnew-list-item-wrapper {
  order: 2;
}

Подключаем Vue.Draggable.

Вычисляемому свойству allTasks добавляем сеттер:

allTasks: {
  get() {
    return this.$store.state.tasks;
  },
  set(val) {
    this.$store.commit('allTasks', val);
  },
},

И добавляем списку обёртку в виде компонента draggable:

draggable.tasks__wrap(v-model="allTasks")
  ...

https://jsfiddle.net/sLmw2tbp/

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

https://jsfiddle.net/94xbndhm/

Сначала надо данные 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`".