0xD34F

Версию vue проверьте. Может, у вас не 2.6 - там новый синтаксис слотов, который вы используете.

<a :href="category.link">

Это как понимать? Или добавьте роутер, и, соответственно, используйте router-link, или уберите ссылки.

Роутера нет - добавляем в компонент свойство, значением которого будет ссылка на элемент массива, содержащий данные выбранного элемента списка. Если что-то выбрано, то показываем (v-if) содержимое этого объекта.

Роутер есть - id, индекс или ещё что-то уникальное (на ваше усмотрение) используется в качестве значения параметра маршрута, передаётся в компонент маршрута, на основе переданного значения из массива извлекается нужный элемент (оформляем это дело как вычисляемое свойство).

Сделайте отдельный компонент счётчика:

props: [ 'start', 'end', 'title', 'delay' ],
data: () => ({
  val: null,
}),
created() {
  this.val = this.start;
  const interval = setInterval(() => {
    if (++this.val >= this.end) {
      clearInterval(interval);
    }
  }, this.delay);
},

<div>
  <h3>{{ title }}</h3>
  <div>{{ val }}</div>
</div>

И создавайте сколько надо экземпляров:

data: () => ({
  counters: [
    { start: -20, end:  69, title:  'hello, world!!', delay: 40 },
    { start:   0, end: 187, title:  'fuck the world', delay: 45 },
    { start: 400, end: 666, title: 'fuck everything', delay: 20 },
  ],
}),

<v-counter
  v-for="n in counters"
  v-bind="n"
/>

data: () => ({
  width: 0,
}),
computed: {
  itemSize() {
    return this.width > 700 ? 46 : 56;
  },
},
methods: {
  onResize() {
    this.width = window.innerWidth;
  },
},
created() {
  this.onResize();
  window.addEventListener('resize', this.onResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.onResize);
},

// или

data: () => ({
  itemSize: null,
}),
created() {
  const mql = window.matchMedia('(max-width: 700px)');
  const onChange = () => this.itemSize = mql.matches ? 56 : 46;
  onChange();
  mql.addEventListener('change', onChange);
  this.$on('hook:beforeDestroy', () => mql.removeEventListener('change', onChange));
},

:item-size="itemSize"

Вместо <div>{{ day }}</div> пусть будет <div v-html="[].concat(day).join('<br>')"></div>. Это если надо по-быстрому заставить работать. Но вообще, стоит переписать так, чтобы дни были единообразно представлены - а то сейчас где-то число, где-то массив. Бред же.

const data = new FormData();
data.append('sampleFile', this.file);

fetch('http://localhost:3000/upload/', {
  method: 'post',
  body: data,
})

UPD. Ну и не очень понятно, зачем файлу надо быть свойством компонента. Почему бы не сделать его параметром метода submitFile?

@change="submitFile($event.target.files[0])"

methods: {
  submitFile(file) {
    ...

is
слоты

как правильно сделать из этого директиву?

Правильно - никак. Использовать execCommand не надо:

Note: This method is obsolete and should not be used. In particular, to interact with the clipboard, consider using the Clipboard API instead.

Так что последуем совету из документации, и воспользуемся современным инструментарием:

const clipboardDirective = (() => {
  const values = new Map();
  const onClick = e => navigator.clipboard.writeText(values.get(e.currentTarget));

  return {
    bind(el, binding) {
      el.addEventListener('click', onClick);
      values.set(el, binding.value);
    },
    update(el, binding) {
      values.set(el, binding.value);
    },
    unbind(el) {
      el.removeEventListener('click', onClick);
      values.delete(el);
    },
  };
})();

Vue.directive('clipboard', clipboardDirective);

Ну как, окей?

Добавим в компонент свойство, которое будет содержать в себе текущее значение прокрутки:

data: () => ({
  scroll: 0,
  ...
}),

Чтобы значение было актуальным, будем обновлять его при наступлении соответствующего события:

created() {
  window.addEventListener('scroll', () => this.scroll = window.scrollY);
},

Сделаем вычисляемое свойство, которое будет представлять классы, назначаемые элементу в зависимости от текущего значения прокрутки:

computed: {
  scrollClasses() {
    return что-то, в зависимости от значения this.scroll;
  },
  ...
},

<div :class="scrollClasses"></div>

https://jsfiddle.net/o1hjb79u/

Vue-slick - это не более чем обёртка над обычным slick'ом, так что vue про клонированные слайды ничего не знает, создаёт их не он. Соответственно, и обработчикам событий, добавляемым с помощью vue, там взяться неоткуда.

Делегируйте обработку событий - обработчик вешается на корневой элемент слайдера, был ли клик выполнен по слайду определяется по наличию класса slick-slide у предков целевого элемента, номер слайда можно определить через атрибут data-slick-index (или можете назначать слайдам какие-то свои классы/атрибуты для выяснения, где был произведён клик).

https://codesandbox.io/s/vue-template-3d5h7

https://jsfiddle.net/78ohjncy/

Наверное, забыли добавить router-view в IndexSegmentComponent.

UPD. Ну да, так и есть. Чувачок чего-то застеснялся и комментарий потёр, но на почту они (комментарии) дублируются, так что восстанавливаю:

Серьезно?)) router-view у меня в App

Серьёзно. Если бы вы составили себе труд ознакомиться с документацией, то были бы в курсе, что для рендеринга компонентов вложенных маршрутов следует использовать отдельные router-view.

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

Вот здесь url имеет значение null:

await axios.get(url)

Или здесь - state.url является null:

await axios.get(state.url)

Могу даже предположить, откуда этот null берётся. Второй вариант, со стейтом. В мутации getFullArticle (кстати, почему get? - вы тут данные не запрашиваете, а кладёте в стейт, правильнее было бы set) помимо прочего выполняется соответствующее присваивание:

state.url = article.previous

Т.е., как я понимаю, получаете данные статьи, в том числе - ссылку на соседнюю статью. В какой-то момент, у очередной статьи не оказывается соседней, вместо ссылки в previous сидит null.

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

Добавьте элементам currentPageItems булево свойство, которое будет информировать о наличии ошибки. Назначайте src в зависимости от значения этого свойства. Устанавливайте его в true при обработке события error.

https://jsfiddle.net/L5qp2okt/

Убрать key с элементов .d_day и .li_day. Элементам .d_day добавить общую обёртку, ей в качестве key указать currentPage. Заменить transition-group на transition.

mounted: {
  submit: () => {

methods: {
  submit() {
    ...

<table>
  <thead>
    <tr>
      <th v-for="day in nameOfDays">{{ day }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="week in getCalendar">
      <td v-for="day in week" class="day">{{ day }}</td>
    </tr>
  </tbody>
</table>

.day:hover {
  background: red;
  color: white;
}

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

как числа которые относятся к прошлому и будущему месяцу сделать серыми а не черными в отличии чисел нынешнего месяца?

<tr v-for="(week, i) in getCalendar">
  <td v-for="day in week" :class="classes(i, day)">{{ day }}</td>
</tr>

methods: {
  classes(week, day) {
    return [
      'day',
      ((!week && day > 7) || (week > 2 && day < 7)) && 'other-month',
    ];
  },
  ...

.other-month {
  ...

:disabled="currentPage === 0"

Ну и какой в этом смысл? 0 - это январь, что, нельзя переключаться на предыдущий год? Уберите.

if(this.currentPage % 11 == 0){

Да ну? Так вы будете с февраля переключаться на декабрь. Проверяйте, что номер текущего месяца меньше нуля.

if(this.currentPage+1 % 11 == 0){

И это тоже работает не так, как вам кажется. Во-первых - чтобы получить нулевой остаток от деления, currentPage должен быть равен 10, т.е., после октября у вас будет идти январь. А во-вторых - приоритет операторов, погуглите что это такое. Реально тут вычисляется остаток от деления единицы на одиннадцать, а не суммы, т.е. (учитывая, что currentPage не должен быть отрицательным) условие никогда не будет истинным. Проверяйте, что номер текущего месяца превышает максимальный (декабрь, 11).

this.currentPage == 11;

this.currentPage == 0;

Кто-то неспособен различить операторы присваивания и сравнения.

подскажите пожалуйста что я неправильно делаю

Да всё правильно делаете - не зная язык, пытаетесь осваивать фреймворк.

Элементам board.Stages добавляете булевы свойства show.

По клику переключаете их значения:

<ui-icon
  iconSet="ico-moon"
  data-icon="i-more"
  @click="stage.show = !stage.show"
>

Список показываете если true:

<div
  class="opportunity-board__list"
  v-show="stage.show"
>