0xD34F

function getDatesIntervalStr(dates) {
  const dateParts = d => ({ year: d.year(), month: d.format('MMMM') });
  const start = dateParts(dates[0]);
  const end = dateParts(dates[dates.length - 1]);

  if (start.year !== end.year) {
    return `${start.month} ${start.year} - ${end.month} ${end.year}`;
  } else if (start.month !== end.month) {
    return `${start.month} - ${end.month} ${end.year}`;
  } else {
    return `${end.month} - ${end.year}`;
  }
}

Вариант раз - запоминаем выделенные ячейки:

data: () => ({
  selected: [],
}),
methods: {
  key: (x, y) => `${y}.${x}`,
  select({ buttons, target: { dataset: { key } } }) {
    if (buttons) {
      const index = this.selected.indexOf(key);
      if (index !== -1) {
        this.selected.splice(index, 1);
      } else {
        this.selected.push(key);
      }
    }
  },
},

<table>
  <tr v-for="y in 10">
    <td
      v-for="x in 10"
      @mousedown="select"
      @mouseover="select"
      :data-key="key(x, y)"
      :class="{ selected: selected.includes(key(x, y)) }"
    >{{ key(x, y) }}</td>
  </tr>
</table>

Вариант два - храним состояния всех ячеек:

data: () => ({
  items: [...Array(10)].map(() => Array(10).fill(false)),
}),
methods: {
  select(row, index, e) {
    if (e.buttons) {
      this.$set(row, index, !row[index]);
    }
  },
},

<table>
  <tr v-for="(row, y) in items">
    <td
      v-for="(cell, x) in row"
      @mousedown="select(row, x, $event)"
      @mouseover="select(row, x, $event)"
      :class="{ selected: cell }"
    >{{ y + 1 }}.{{ x + 1 }}</td>
  </tr>
</table>

const output = data
  .map(n => `
    <div>
      <h2>${n.univ} (${n.sotr.length})</h2>
      <ul>${n.sotr.map(m => `
        <li>
          <h3>${m.name}</h3>
          <h3>${m.grade}</h3>
        </li>`).join('')}
      </ul>
    </div>`)
  .join('');

В стейте должно быть два свойства - значение инпута и его копия. В обработчике onChange инпута обновляете значение инпута; в обработчиках onClick кнопки и onMouseLeave формы копируете во второе свойство значение инпута, а само его сбрасываете.

Или можете попробовать обойтись одним свойством в стейте, но тогда потребуется добавить ref на инпут. Обрабатывать change в этом случае не надо.

Вариант попроще - заворачиваем весь список в 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/