0xD34F

Использовать индекс в качестве key не надо никогда. Чтоб вот такого, как у вас сейчас, не было.

Делаем нормальный key - всё окей.

Как можно с помощью axios подставить данные в массив chart?

Это в принципе невозможно, axios - для выполнения запросов, а не работы с массивами.

Разумеется, вы имели в виду кое-что другое, и даже понятно, что именно. Но учитывая фантастически ублюдочную формулировку вопроса, иного ответа вы не заслуживаете. Под ублюдочной формулировкой я имею в виду не только непонимание, о чём вы сами же и спрашиваете, но также и почти полное отсутствие какой-либо конкретики. А именно:

Не сказано ни слова о графике, что он отображает.

Получение данных для графика осуществляется будто бы с помощью axios - но единственный показанный запрос про другое, там идёт получение данных для выпадающего списка. То есть, должен быть ещё какой-то запрос. Какой? - url, параметры, структура ответа - ничего не известно.

Далее, "подставить данные" вы планируете в "массив chart" - но как следует из показанного огрызка кода, такого массива нет. Есть chartData. Это он? Или какой-то другой массив? Не знаю что и думать. Что до собственно "подставить" - у массивов есть метод push, неужели вы про него не слышали? Если не слышали - разговаривать тут не о чем, идите учить язык. А где-нибудь через полгодика, не раньше, можно будет и в сторону vue попробовать посмотреть. Если слышали - очевидно, сам по себе push проблемой быть не может, придётся констатировать, что о сути своих затруднений вы решили попросту умолчать.

Компонент line-chart, который, надо полагать, ответственен за построение графика - что это такое? Едва ли вы его написали сами - это или сторонний компонент, или обёртка над сторонним компонентом. Почему нет ссылки на документацию/github/...? - насколько я понял, график успешно строится, но надо динамически докидывать в него данные, так что сведения о компоненте графика пришлись бы очень кстати. Отслеживает ли он изменения своих параметров? Или может у него есть метод, позволяющий принудительно обновить свой внешний вид? Но нет - и тут никакой информации.

Вот так.

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

График строится библиотекой chartkick.js

есть запрос <...> необходимо подставить значения получаемых менеджеров в имена chartData. То есть в chartData:[{name:[сюда]}]

Понятно.

Не надо ничего "подставлять". Делаем отдельные свойства name и data, а chartData будет вычисляемым, причём собирать массив надо только в том случае, когда и name и data будут получены:

computed: {
  chartData() {
    const { names, data } = this;
    return names && data && data.map((n, i) => ({
      name: names[i],
      data: n,
    }));
  },
},

Соответственно, график создаётся только в том случае, если удалось собрать chartData:

<line-chart v-if="chartData" :data="chartData"></line-chart>

https://jsfiddle.net/t5dovxL4/

Непонятно, чем мотивировано неиспользование v-for. Если использовать, будет гораздо проще добиться того, что вы хотите, например:

.hidden {
  opacity: 0;
}

data: () => ({
  items: [
    { text: '...', hidden: true },
    { text: '...', hidden: true },
    ...
  ],
}),
mounted() {
  this.items.forEach((n, i) => {
    setTimeout(() => n.hidden = false, 300 * (i + 1));
  });
},

<li v-for="{ text, hidden } in items" :class="{ hidden }">
  <a href="">{{ text }}</a>
</li>

В колонках где tbody я смог реализовать

Не до конца - у вас нет связи между чекбоксом и значением соответствующего свойства. Надо сделать:

<template slot="isActive" slot-scope="{ item }">
  <b-form-checkbox v-model="item.isActive"></b-form-checkbox>
</template>

но вот в thead не получается

Делаете вычисляемое свойство, которое будет представлять общее состояние всех чекбоксов в столбце. Геттер возвращает true, если все чекбоксы true; сеттер - назначаете всем чекбоксам переданное значение:

checkedAll: {
  get() {
    return this.items.every(n => n.isActive);
  },
  set(val) {
    this.items.forEach(n => n.isActive = val);
  },
},

И используете это свойство в хедере:

<template slot="HEAD_isActive" slot-scope="data">
  <b-form-checkbox
    @click.native.stop
    :checked="checkedAll"
    @change="checkedAll = $event"
  ></b-form-checkbox>
</template>

https://jsfiddle.net/k1cbz7nu/

Не вижу тут никакой особой логики - только ничем не мотивированное усложнение кода. Если вы говорите, что "возвращать ничего не надо" - зачем тогда получать результаты, складывать их? Да ещё и перетирая один из них, никак не использовав. Так что: вызов первого экшена - оставляем без изменений; второй и третий - просто await'ы, переменную coins убираем; в конце - просто await market, return и суммирование убираем.

Зачем сохранять контекст в отдельную переменную? - при создании стрелочных функций тоже можно использовать async.

Установка значения isLoading - почему вы меняете состояние хранилища вне мутации? Так дела не делаются.

category.id === this.$route.params.category

Я бы предположил, что проблема здесь. Существует ли объект с id, указанным в $route.params.category? И не получается ли так, что вы пытаетесь сравнивать значения разных типов? - скажем, category.id является числом, а params.category строкой.

Есть ощущение, что я что-то в доках базовое пропустил

Может is?

Ну, во-первых не метод, а свойство.

А во-вторых - всё-таки так, undefined. Вы монтируете второй экземпляр Vue внутрь первого. Зачем вам такое могло понадобиться - лично мне фантазии представить не хватает. Первый экземпляр при компиляции конечно же обрабатывает ту часть шаблона, которая по вашей мысли предназначена для второго. Отсюда и ошибки - у первого экземпляра нет тех свойств, которые есть у второго, и которые используются в шаблоне.

Что делать? Ну, первый вариант очевиден - избавьтесь от второго экземпляра Vue, перенесите его данные в первый, или сделайте отдельный компонент - это уж вам виднее. Второй, это если вам вот прям кровь из носу надо чтобы экземпляров было два и один монтировался внутрь другого - используйте v-pre (опасно, если при обновлении внешнего экземпляра окажется затронут элемент, к которому примонтирован внутренний - внутренний экземпляр отвалится).

Добавьте в App:

beforeRouteEnter(to, from, next) {
  if (store.getters.user) {
    next(false)
  } else {
    next()
  }
}

<section id="app-pro">     
      <router-view></router-view>
</section>

new Vue({
  el: '#app-pro',
  render: h => h(AppPro),
  router
}).$mount('#app-pro')

Вы вообще как - понимаете, что тут понаписали? Вопрос риторический - конечно нет, не понимаете. Открываете документацию и читаете - что такое render, el и $mount. Особое внимание обращаете вот на этот фрагмент:

The render function has priority over the render function compiled from template option or in-DOM HTML template of the mounting element which is specified by the el option.

Можно повесить обработчик на событие load (нативное, сам компонент событий не генерирует). В обработчике надо проверить, что e.target.src правильный - потому что событие возникает дважды, первый раз при показывании заглушки, второй - когда загружена настоящая картинка. Как-то так.

Если вы хотите независимые счётчики - так или иначе, но у каждого должно быть отдельное свойство counter. Что конкретно вас в этом не устраивает - не очень понятно. Необходимость прописывать свойство вручную каждому элементу? - ну так нет необходимости делать это вручную:

data: () => ({
  items: [
    { title:  'hello, world!!' },
    { title:  'fuck the world' },
    { title: 'fuck everything' },
  ].map(n => (n.counter = 0, n)),
}),

<div v-for="n in items">
  <button @click="n.counter++">{{ n.title }}</button>
  <span>total: {{ n.counter }}</span>
</div>

<td>{{ item.open | moment('utc', 'HH:mm:ss') }}</td>

При этом точно такой же блок кода, но с другим свойством, отлично срабатывает и текст меняется. Отличие в том, что это другое свойство изначально есть в этом объекте campaign, а не устанавливается в created.

Ясно. Вы, очевидно, думаете, что документацию читать не надо. Вы ошибаетесь. Читайте.

Задайте key для router-view, зависящий от маршрута.

Например: <router-view :key="$route.path"></router-view>.

При изменении вводимых пользователем данных удаляйте информацию об ошибках (можно сделать через watch или дополнительный обработчик события input), а при submit'е проверяйте наличие ошибок.

В компоненте category вы забыли подписаться на событие toggled, генерируемое дочерними category (его следует пробрасывать в родителя). И вместо isActive (про него вы при создании дочерних category тоже почему-то забыли) наверное стоит передавать id элемента - а то непонятно, кого и на каком уровне вложенности надо считать активным.

Ну и в целом - зачем два компонента для построения вложенного меню? Как-то сложновато получается. Достаточно и одного. Например.

UPD. А вообще нет, один компонент, проброс активного id вниз и события вверх - дрянь идея. Оставляем два компонента, пусть экземпляры списков имеют доступ к корню через provide / inject. Вот так.

Смотрим код компонента, и видим, что на содержимое окна вешается обработчик клика, где происходит остановка всплытия:

click: evt => {
  evt.stopPropagation()
  // https://github.com/bootstrap-vue/bootstrap-vue/issues/1528
  this.$root.$emit('bv::dropdown::shown')
}

Какой-то наркоманский бред, иначе и не скажешь. Откуда вы взяли, что изменение items должно как-то повлиять на render.items? Серьёзно - ОТКУДА ВЫ ЭТО ВЗЯЛИ? Расскажите пожалуйста, очень интересно.

Может, вам тут стоило сделать computed свойство?

А может, вместо того, чтобы заниматься вот этой вот ерундой, просто задать placeholder?

<v-text-field
  placeholder="-"
  v-model="product.product.comment"
  :solo="none_change"
  :readonly="none_change"
></v-text-field>