Как совместить inserted() + dynamic?

Question

[Alianos]

Здравствуйте, я пытаюсь создать language-dropdown но так как он должен выбрать значение по дефолту то мне нужен inserted чтоб менять текст названия дефолтного языка, однако мне также нужно чтоб текст выбраного языка менялся при изменении выбора языка. Очень хотелось бы чтоб ето зависело только от переменной $i18n.locale
Сейчас я использую такой костыль из двух директив

selectedLocaleFirst: {
      inserted(el, binding, vnode) {
        el.innerHTML = document.querySelector(
          `div[data-locale="${vnode.context.$i18n.locale}"]`
        ).innerHTML;
      },
    },
selectedLocaleDynamic(el, binding, vnode) {
        el.innerHTML = document.querySelector(
          `div[data-locale="${vnode.context.$i18n.locale}"]`
        ).innerHTML;
      },

Тоесть вариант просто функцыей не срабатывает в первый раз потому что вызывается когда елемента ищущегося document.querySelector не существует в DOM, изза етого приходится приписывать inserted
Но ето видь не правильно, как можно ето сделать в одной директиве...