0xD34F

$('.particle').attr('style', figures[randFigure]);

Замените

$(this).prev(value).html(this.value);

на

$(this).prev(value).find('.range-slider__value').html(this.value);

$('select').select2({
  minimumResultsForSearch: Infinity,
  dropdownParent: $('.card-more'),
});

Так:

:nth-child(4n+2),
:nth-child(4n+3) {
  background: red;
}

??

export default {
  data () {
    props: ['a'],
    return {
      qwe: "Привет 2"
    }
  }
}

Это шизофрения какая-то. Наверное, имелось в виду

export default {
  props: ['a'],
  data() {
    return {
      qwe: "Привет 2"
    }
  }
}

Никакие атрибуты трогать в данном случае не надо, да и не нужны они.

Добавляем два свойства в data - возможные значения, и выбранное значение:

data: () => ({
  selectedPercent: null,
  percents: [ 30, 40, 50 ],
  ...
}),

Разметку создаём на основе данных; обработка клика - нужное значение сразу доступно, так что просто выполняем присваивание:

<div v-for="p in percents" @click.prevent="selectedPercent = p">
  ...

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

computed: {
  header() {
    return this.selectedPercent !== null ? this.selectedPercent : 'hello, world!!';
  },
},

Ну и выводим его:

<h1>{{ header }}</h1>

Делать watch на elems. Код создания картинок вынести в метод, который дёргать в mounted и в watcher'е. Как-то так.

держите

UPD. Или, с использованием вашей демки.

const $li = $('ul li').show().slice(8).hide();

$('#loadMore').on('click', function(e) {
  e.preventDefault();
  $li.fadeToggle();
});

Нужны два массива значений - доступных для выбора и выбранных. Пункты select'ов создаются на основе списка доступных значений, в зависимости от присутствия значения в списке выбранных назначаете disabled:

data: () => ({
  items: [...Array(10)].map((n, i) => `item ${i}`),
  selected: Array(4).fill(null),
}),

<select v-for="(s, i) in selected" v-model="selected[i]">
  <option
    v-for="n in items"
    v-text="n"
    :disabled="selected.includes(n)"
  ></option>
</select>

https://jsfiddle.net/2wz6sgxb/

Что делаю не так?

Пытаетесь изнасиловать труп - компонент не обновлялся уже три года. Либо найдите что-нибудь посвежее, либо перепишите его самостоятельно (там работы минут на пять, не больше).

Рекурсия есть:

const serialize = (obj, path) => Object
  .entries(obj)
  .map(([ k, v ]) => {
    const p = path ? `${path}[${k}]` : k;
    return v instanceof Object ? serialize(v, p) : `${p}=${v}`;
  })
  .join('&');

Рекурсии нет:

function serialize(obj) {
  const result = [];

  for (const stack = [ [ obj, '' ] ]; stack.length;) {
    const [ n, path ] = stack.pop();
    if (n === Object(n)) {
      stack.push(...Object
        .keys(n)
        .map(k => [ n[k], path ? `${path}[${k}]` : k ])
        .reverse()
      );
    } else {
      result.push(`${path}=${n}`);
    }
  }

  return result.join('&');
}

img.onload = () => images.appendChild(img);
img.onerror = () => console.log('меня нет');

не уверен, что применяются :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 с пустой строкой; также обратите внимание, что при выборе даты выведенное сообщение об ошибке пропадает с указанной задержкой.

https://jsfiddle.net/jrmocby8/

сохранить доступ к 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();

Лишние фигурные скобки, должно быть так:

const ItemCheckbox = ({
  position,
}) => (
  position ? (
    <p>Hello</p>
  ) : (
    <p>Good</p>
  )
);

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

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

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

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

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

Добавьте key вашему CSVLink. Такой, чтобы зависел от содержимого rows.