0xD34F

Делать 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.

Во-первых, get-age - это не data-атрибут. Меняйте на data-age.

Во-вторых, сделайте значения селекторами, т.е. вместо age_3_6 будет .age_3_6, вместо age_7_10 будет .age_7_10 и т.д., ну а у элемента "все" будет data-age="*".

const itemSelector = '.ped_holder .ped';
const buttonSelector = '.ages a';
const activeButtonClass = 'active';
const selectorAttr = 'age';

const $buttons = $(buttonSelector).click(function() {
  const selector = $buttons
    .removeClass(activeButtonClass)
    .filter(this)
    .addClass(activeButtonClass)
    .data(selectorAttr);

  $(itemSelector).hide().filter(selector).show();
});

// или, к чёрту jquery

const buttons = document.querySelectorAll(buttonSelector);
const items = document.querySelectorAll(itemSelector);

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: t }) {
  const selector = t.dataset[selectorAttr];
  buttons.forEach(n => n.classList.toggle(activeButtonClass, n === t));
  items.forEach(n => n.style.display = n.matches(selector) ? '' : 'none');
}

getMyIP() {    
  return axios.get('https://httpbin.org/get').then(response => response.data.origin)
}
  
handleClick() {
  this.getMyIP().then(ip => console.log(`ip: ${ip}`))
}

Сортируем существующий массив:

arr.sort((a, b) => {
  a = a.split('.', 2);
  b = b.split('.', 2);
  return (a[1] - b[1]) || (a[0] - b[0]);
});

Или, собираем отсортированный новый:

const sortedArr = arr
  .map(n => n.split('.'))
  .sort((a, b) => (a[1] - b[1]) || (a[0] - b[0]))
  .map(n => n.join('.'));

передаю метод без аргумента onBlur={this.handleChange}

стоит мне изменить на onBlur={this.handleChange('title')}

Т-а-а-а-к, ясно. Осознаёте ли вы, что в первом случае вы назначаете в качестве обработчика onBlur метод handleChange, а во втором - результат его выполнения? Вы вообще понимаете, что функция и вызов функции - не одно и то же?

Хотите передавать параметр, делайте так: onBlur={() => this.handleChange('title')}. Или вместо передачи значения в качестве параметра добавляйте его элементу как атрибут, а в обработчике события считывайте:

onBlur={this.handleChange} data-change-param="title"

handleChange = (e) => {
  const changeParam = e.target.getAttribute('data-change-param');
  ...

Рекурсия:

const sum = (val, index = 0) =>
  val instanceof Array
    ? val.length > index
      ? sum(val[index]) + sum(val, index + 1)
      : 0
    : val;