0xD34F

<a :href="category.link">

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

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

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

https://jsfiddle.net/oh9Lfdmu/

https://jsfiddle.net/emw9zxnr/

bulkCreate

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

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"
/>

1. https://developer.mozilla.org/ru/docs/Web/JavaScri...
2. https://developer.mozilla.org/ru/docs/Web/JavaScri...

Забудьте про реакт на ближайшие полгода и марш изучать js.

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"

const ceil = (value, precision) => Math.ceil(value / precision) * precision;


const values = [ 1, 2, 3, 163, 200.001, 99.999 ];
values.map(n => ceil(n, 1)); // [ 1, 2, 3, 163, 201, 100 ]
values.map(n => ceil(n, 10)); // [ 10, 10, 10, 170, 210, 100 ]
values.map(n => ceil(n, 5)); // [ 5, 5, 5, 165, 205, 100 ]

url.match(/(\d+)\?/)[1]

или

/\d+(?=\?)/.exec(url).pop()

или

url.split('?', 1).shift().split('/').pop()

или

url.replace(/\?.+/, '').replace(/.+\D/, '')

map.events.add('click', e => e.get('target').balloon.close());

jsfiddle.net/axtjgfh9

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

class App extends React.Component {
  state = {
    items: [
      { id:  69, text:  'hello, world!!' },
      { id: 187, text:  'fuck the world' },
      { id: 666, text: 'fuck everything' },
    ],
    active: null,
  }

  onClick = e => {
    this.setState({
      active: +e.target.dataset.index,
    });
  }

  render() {
    const { items, active } = this.state;

    return (
      <div>
        {items.map((n, i) => (
          <div
            key={n.id}
            data-index={i}
            className={i === active ? 'active' : ''}
            onClick={this.onClick}
          >{n.text}</div>
        ))}
      </div>
    );
  }
}

Отсортировать массив, найти индекс, не равный соответствующему элементу минус один, увеличить индекс на единицу; если такой индекс отсутствует, значит отсутствует последнее число - длина массива плюс один:

function findN([...arr]) {
  const index = arr.sort((a, b) => a - b).findIndex((n, i) => i !== ~-n);
  return -~index || -~arr.length;
}

Желательно, чтобы вычислительная сложность была O(n)

Ненормальный способ - создать массив длиной N, обойти исходный массив, сохраняя в новый информацию о том, какие числа есть, затем в новом массиве выполнить поиск индекса, для которого число в исходном массиве не встретилось:

const findN = arr => -~arr
  .reduce((acc, n) => (acc[~-n] = !1, acc), Array(-~arr.length).fill(!0))
  .findIndex(Boolean);

Нормальный способ - погуглить формулу суммы натуральных чисел от 1 до N, вычесть содержимое массива:

const findN = arr =>
  arr.reduce((acc, n) => acc - n, (arr.length + 2) * (arr.length + 1) / 2);

Ну и в качестве бонуса:

const findN = arr =>
  arr.reduce((acc, n, i) => acc ^ n ^ -~i, -~arr.length);

const Header = ({ Top }) => (
  <div className="navHeader">
    <Top />
  </div>
);

...

<Header Top={Top} />

class TabContent extends React.Component {
  render() {
    const { title, content } = this.props;

    return (
      <div className="tabcontent">
        <h3>{title}</h3>
        <p>{content}</p> 
      </div>
    );
  }
}

class Tabs extends React.Component {
  state = {
    active: null,
  }

  openTab = e => this.setState({
    active: +e.target.dataset.index,
  });

  render() {
    const { items } = this.props;
    const { active } = this.state;

    return (
      <div>
        <div className="tab">
          {items.map((n, i) => (
            <button
              className={`tablinks ${i === active ? 'active' : ''}`}
              onClick={this.openTab}
              data-index={i}
            >{n.title}</button>
          ))}
        </div>
        {items[active] && <TabContent {...items[active]} />}
      </div>
    );
  }
}

const swiperOptions = {
  ...
  on: {
    'init resize slideChangeTransitionStart'() {
      $('.swiper-pagination').css({
        top: $('.swiper-slide-active .head').height() + 30, /* или 40, или 50, или...
                                                             * на ваше усмотрение, это чтобы
                                                             * пагинация была чуть ниже заголовка,
                                                             * а не залезала на него
                                                             */
      });
    },
  },
};

options: {
  animation: {
    onComplete() {
      const { ctx, data, chart } = this;

      ctx.fillStyle = 'red';
      ctx.textAlign = 'center';

      data.datasets.forEach((d, index) => {
        chart.controller.getDatasetMeta(index).data.forEach((n, i) => {
          ctx.fillText(d.data[i], n._model.x, n._model.y - 10);
        });
      });
    },
  },
},

https://jsfiddle.net/uz9h3dg0/

Как сделать, чтобы подписи осей были ниже

Задать padding побольше:

options: {
  scales: {
    xAxes: [ {
      ticks: {
        padding: тут типа число должно быть,
        ...

Как сделать, чтобы было не 1000000, а 1 000 000

Форматировать с помощью toLocaleString:

options: {
  scales: {
    yAxes: [ {
      ticks: {
        callback: val => val.toLocaleString(),
        ...

https://jsfiddle.net/hfjg6pex/

Снизу подписи начинают идти через 1(происходит это из-за длинного описания), можно ли насильно заставить, чтоб выводились все описания?

Добавить autoSkip: false в настройки подписей.

Можно ли первой подписи задать к примеру красный цвет, а остальным уже зеленый?

Нет. Можно попробовать рисовать подписи самостоятельно, оформив это дело как плагин.

UPD. В третьей версии добавили возможность задавать цвет каждой подписи индивидуально:

options: {
  scales: {
    x: {
      ticks: {
        color: ({ index }) => index === 0 ? 'red' : 'green',
      },
    },
  },
},

https://jsfiddle.net/zcr61u5k/