0xD34F

Проблема из-за css. Для всех canvas'ов у вас задано правило width: 100% !important;, а родительский элемент canvas'а карты имеет нулевые размеры.

UPD.

new ymaps.Map("map", {

Вот так делать не надо. Что если экземпляров компонента с картой будет больше одного? - двух, трёх и т.д. карт с одним id быть не может. Замените id на ref, и передавайте в конструктор карты вместо id сам элемент.

data: () => ({
  size: 52,
  col: 0,
  row: 0,
}),
methods: {
  onMouseMove(e) {
    this.col = e.offsetX / this.size | 0;
    this.row = e.offsetY / this.size | 0;
  },
},
computed: {
  blockStyle() {
    return {
      backgroundSize: `${this.size}px ${this.size}px`,
    };
  },
  blockCursorStyle() {
    const { col, row, size } = this;
    return {
      transform: `translate(${col * size}px, ${row * size}px)`,
      width: `${size * 0.95}px`,
      height: `${size * 0.95}px`,
    };
  },
},

<div class="block" :style="blockStyle" @mousemove="onMouseMove">
  <div class="block-cursor" :style="blockCursorStyle"></div>
</div>

https://jsfiddle.net/La4297zd/

Почему вместо координат курсора хранятся индексы столбца и строки - это чтобы при изменении размера не случалось переключения подсветки на другую ячейку.

Свойство width у элементов headers. Число или строка. Если число - это пиксели. Если строка - доступны все единицы измерения css (значение подставляется в style соответствующего th).

В документации не нашёл.

Я бы скорее поверил в "не нашёл документацию". Чего там можно было не найти - без понятия, всё на поверхности лежит (в блоке API: компонент v-data-table, вкладка props - выбраны по умолчанию, достаточно просто скроллить вниз и читать, какой параметр за что отвечает - неужели это так сложно?).

Сначала определяете директиву, потом создаёте экземпляр Vue. Не наоборот.

UPD. Первая буква в имени директивы - русская:

Vue.directive('сarusel', {

return this.singleMetricNamesMap.forEach(el => el[this.value.metricId])

Круто.

Откройте документацию, разберитесь, что такое forEach. И какие ещё бывают методы у массивов.

UPD.

metric() {
    if (this.metric) {
        this.setSingleMetricNamesMap({ [this.metric.id]: this.metric.name })
    }
}

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

metric(val) {
  if (val) {
    this.setSingleMetricNamesMap({ [val.id]: val.name });
  }
},

Слот item позволяет определить разметку строки целиком:

<v-data-table>
  <template #item="{ item }">
    <tr>
      <td class="какой-то_класс">{{ item['какое-то свойство'] }}</td>
      <td class="ещё_какой-то_класс">{{ item['ещё какое-то свойство'] }}</td>
      <td class="ну_и_так_далее">{{ item['как видите, ничего сложного'] }}</td>
    </tr>
  </template>
</v-data-table>

v-for={weekDay in this.arWeekDays}

выдает ошибку "index is not defined"

А может, всё-таки "weekDay is not defined"? Или вы о чём-то умалчиваете?

Про v-for забудьте:

<div>
  {this.arWeekDays.map(n => <div>{n}</div>)}
</div>

data: {
    circle: document.querySelector(`.circle`)
},

Бессмысленно сохранять ссылки на элементы шаблона. После инициализации экземпляра Vue этот элемент уже не будет частью страницы - исходное содержимое .app Vue заменит элементами, которые создаст сам. Если хотите иметь доступ к ним, для этого есть специальный механизм. Т.е., добавляете атрибут ref элементу .circle:

<div class="circle" ref="circle"></div>

В методе move заменяете this.circle на this.$refs.circle:

this.$refs.circle.style.left = `${e.pageX}px`;
this.$refs.circle.style.top = `${e.pageY}px`;

https://jsfiddle.net/4esvu230/

А вообще, ссылка на элемент не нужна:

data: () => ({
  coords: [ 0, 0 ],
}),
computed: {
  style() {
    return {
      left: this.coords[0] + 'px',
      top: this.coords[1] + 'px',
    };
  },
},
created() {
  document.addEventListener('mousemove', e => this.coords = [ e.pageX, e.pageY ]);
},

<div class="circle" :style="style"></div>

https://jsfiddle.net/70uLyqr4/

Добавить в компонент булево свойство, которое будет обозначать порядок сортировки, и переключать его значение при вызовах метода sorted. Например.

Этот компонент - всего лишь обёртка над собственно swiper'ом. Который для создания бесконечной прокрутки делает копии слайдов (последнего, предпоследнего и т.д. перед первым; первого, второго и т.д. после последнего). При копировании элемента обработчики событий не копируются (кроме инлайновых, но, очевидно, тут другой случай). Отсюда "клик не срабатывает" - когда вы кликаете по клонированному слайду.

Делегируйте обработку событий. Обработчик клика будет один, и прицеплен к корневому элементу слайдера:

<swiper @click="onClick"

methods: {
  onClick(e) {
    const slide = e.target.closest('.swiper-slide');
    if (slide) {
      console.log(`slide ${slide.dataset.swiperSlideIndex} clicked`);
    }
  },

по клику на чекбокс не происходит фильтрация items

Ну ткнулись вы в чекбокс name, например - дальше что должно происходить? Чтобы фильтрация выполнилась, кроме активации фильтра надо ещё что-то ввести в строку поиска.

как запустить bootstrap пример

Ну, НАВЕРНОЕ, КАК МИНИМУМ, скопировать его полностью - чего вы не сделали.

как можно реализовать фильтрацию списка по статусу...

Добавить в компонент свойство - выбранный статус. Устанавливать его значение при клике. Сделать собственную функцию фильтрации. Например.

...по клику на кнопки

Не очень понятно, зачем обычные кнопки - есть же радио.

Версия bootstrap-vue устаревшая используется. Да и сам vue тоже другой нужен. Обновите их.

Ну или меняйте синтаксис слотов на старый. Т.е., например, вместо

v-slot:cell(index)="data"

будет

slot="index" slot-scope="data"

set(count) {
  this.$store.commit('setCount', {
    count,
    index: this.index,
  });
},

Замените

@keyup.enter.prevent

на

@keydown.enter.prevent.exact

Производится отправка формы, страница перезагружается. Добавьте форме @submit.prevent. Или клик по кнопке обрабатывайте иначе: @click.prevent="addGuest".

Сделайте вычисляемое свойство, где будут все нужные данные - это избавит от необходимости использовать v-if.

Что-то вроде:

categoriesWithPosts() {
  return this.categories.map(n => ({
    ...n,
    posts: this.posts.filter(m => m.category === n.id),
  }));
},

Загружайте конфиг до инициализации приложения:

store.dispatch('config/loadMain').then(() => {
  new Vue({
    ...

А есть ли router-view внутри ./views/control-panel/Index.vue?