Александр

У вас ошибка в понимании реактивности vue. Не надо писать функцию, проверяющую что-то и меняющую стиль. Надо указать, в каком случае этот стиль должен применяться.

<template>
  <div class="column-s max-width maib-centr-column pannel-list-time">
    <span
      v-for="(TimeItem, index) in ListsTime"
      :key="index"
      :class="{'list-time-item': BookedTime.includes(TimeItem)}">
      {{ TimeItem }}:00
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ListsTime: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
      BookedTime: [11, 12, 15, 16, 17, 18, 21, 22, 23],
    }
  },
}
</script>

<style>
  .list-time-item {
    background-color: #E5E5E5;
  }
</style>

Методы массива some и every вам помогут

Высоту активного слайда нужно взять дефолтной.
Остальные слайды трансформировать transform: scale()

Я не помню точно, какие там классы у слайдов, но примерно будут такие стили:

.slick-slide {
  transform: scale(0.8);
  transition: transform 0.8s ease;
}
.slick-active {
  transform: scale(1);
}
.slick-active + .slick-slide {
  transform: scale(0.9);
}
.slick-active + .slick-slide ~ .slick-slide {
  transform: scale(0.7);
}

data: () => ({
  blockTypes: [ 'block-item1', 'block-item2' ],
  blocks: [],
}),

<button v-for="n in blockTypes" @click="blocks.push(n)">add {{ n }}</button>
<component v-for="n in blocks" :is="n"></component>