How to combine inserted() + dynamic?

Question

Vue.js

Hello, I'm trying to create a language-dropdown but since it should select a default value, I need inserted to change the text of the default language name, but I also need the text of the selected language to change when the language selection changes. I would very much like it to depend only on the $i18n.locale variable.
Now I use such a crutch of two directives

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;
      },

That is, the variant simply by the function does not work the first time because it is called when the element of the searched document.querySelector does not exist in the DOM, because of this it is necessary to attribute inserted
But this is not correct, how can this be done in one directive ...