0xD34F

не уверен, что применяются :data-vv-as и :data-vv-delay аттрибуты

А эта ваша неуверенность - она основана хоть на чём-нибудь? Я вот знаю, что всё применяется.

Может, дело в том, что в вашем примере вместо сообщения об ошибке, которое генерирует vee-validate, показывается какое-то другое? - потому вы и не видите подмены имени поля. А отсутствие задержки обусловлено тем, что единственный сценарий валидации, который вы проверяли - это отправка формы, а в соответствующем обработчике валидация осуществляется немедленно, в то время как задержка предназначена для пользовательского ввода:

You can specify a delay to debounce the input event, a case scenario that you may want to wait for the user to stop typing then validate the field

Сделал пример к сказанному выше:

Сообщение об ошибке выводится то, которое генерирует vee-validate.
Имитация пользовательского ввода - кнопка сброса, вместо прямой установки значения кидается событие input с пустой строкой; также обратите внимание, что при выборе даты выведенное сообщение об ошибке пропадает с указанной задержкой.

сохранить доступ к el и binding

Элемент будет доступен как this.

Что до binding - можно использовать dataset для передачи значения. Например.

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

датасет дает нам возможность сохранять только примитивы

Можно прицепить интересующий вас объект к элементу в качестве его свойства, типа так. Или использовать Map/WeakMap, где ключом будет элемент, например.

А вообще, возможно, что вы неверно выбрали инструмент для решения своей проблемы, и тут вместо директивы следует использовать компонент.

// где-то вне метода загрузки сканов
const docApi = {
  oneDoc: oneDocApi,
  anotherDoc: anotherDocApi,
  ...
};

docApi[this.type].uploadScan();

Можно даже в виде вычисляемого свойства оформить:

computed: {
  docApi() {
    return docApi[this.type];
  },
},

this.docApi.uploadScan();

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

Да неужели? А параметры на что?

хотелось бы иметь возможность каким-либо образом отменить передачу значения, не прошедшего валидацию наверх

Ну так вы не тупо делайте emit, а при условии отсутствия ошибок.

UPD. https://jsfiddle.net/369saL08/

Пробовал указать и a.href и a.getAttribute('href') и т.д.

Лучше бы попробовали документацию почитать.

@click.prevent="toPage"

toPage(e) {
  console.log(e.target.href)
}

Каким самым правильным способом можно это сделать?

"Самых правильных" способов нет.

Создавать еще один элемент в data()?

Да.

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

Использовать индекс в качестве 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>