0xD34F

пробросить метод компонента Menu в качестве параметра компоненту Button

Не надо так.

Пусть Button генерирует событие клика, на которое вы подпишитесь в App и в обработчике измените какое-то свойство, которое в качестве параметра передаётся в Menu, где вы в зависимости от значения этого параметра будете предпринимать нужные действия (пример). Накрайняк - поставьте ref на экземпляр Menu и в обработчике клика напрямую дёргайте интересующий вас метод (пример).

Vue.directive('emoji', (el, binding) => el.innerHTML = emoji(binding.value));

<div class="conversation_name" v-emoji="chatName"></div>

<div
  v-for="item in items"
  class="col-md-3 services-item"
  :class="{ hoverClass: item.hover }"
>
  <img :src="item.scr" alt="">
  <h3 class="my_services_title">Тест</h3>
  <button
    class="btn-price"
    @mouseenter="item.hover = true"
    @mouseleave="item.hover = false"
  >Нажать</button>
</div>

data: {
  items: [
    {
      src: 'img/laptop.png',
      hover: false,
    },
    {
      src: 'img/laptop.png',
      hover: false,
    },
  ],
},

UPD. Конечно, я затупил - как подсказывает в комментариях delphinpro, отдельные свойства hover не нужны, достаточно хранить индекс активного элемента.

https://jsfiddle.net/gcybmo64/

Сохраняйте значение scrollHeight. И делайте watch на массив элементов - в обработчике вычисляйте разницу между старым и новым значениями scrollHeight, корректируйте соответствующим образом scrollTop. Как-то так.

например (поскольку свой svg вы решили не показывать, взял первый нагугленный)

Почему так происходит?

Потому что вы используете динамическую передачу данных. Соответственно, переданная строка либо рассматривается как имя свойства текущего компонента, либо является некорректным мусором. Отсюда undefined (свойства нет) и "скрипт вылетит" (из-за мусорного значения параметра не удалось скомпилировать шаблон).

Ну а числа и json, они являются корректными выражениями: число оно и есть число, а json рассматривается как литерал объекта/массива.

Мне необходимо строку передать в url

Передавайте статическое значение, или оберните значение в кавычки.

<img :src="comment.comment_image">

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. Или, с использованием вашей демки.

Нужны два массива значений - доступных для выбора и выбранных. Пункты 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/

не уверен, что применяются :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()?

Да.

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