Пользовательская директива Vue2, модифицирующая вызов компонента

Question

Я пытаюсь написать директиву Vue, которая обновляет свойства компонента до его оценки.

Например, рассмотрим следующее.

<b-modal v-i18n:title="'i18n.key'">
  Hello
</b-modal>

b-modal является компонентом Vue, и он принимает свойство, называемое title. Я хотел бы иметь пользовательскую директиву, которая может установить заголовок свойства после перевода предоставленного ключа.

То есть я хотел бы, чтобы приведенный выше код был переписан с помощью директивы:

<b-modal title="Translated Text">
  Hello
</b-modal>

До сих пор я прочитал следующие ресурсы и не нашел ссылок на то, как это сделать.

https://css-tricks.com/power-custom-directives-vue/ http://optimizely.github.io/vuejs.org/guide/directives.html

Моя текущая попытка выглядит так:

Vue.directive('i18n', {
  inserted: function (el,binding) {
    const i18nKey  = binding.value;
    const attrName = binding.arg;

    el.setAttribute(attrName, i18nKey);
  }
})

Эта попытка, к сожалению, терпит неудачу. Это приводит к изменению конечного элемента DOM и не влияет на свойство, прошедшее к компоненту Vue.

Как я могу изменить указанную выше директиву, чтобы изменить свойства, передаваемые в b-модальный компонент?