How to make vue 2 cli + i18n word translation animation?

Question

Internationalization and localization

As you know, when changing the language through i18n, the length of the word changes. I want to animate the change in length. For this I have a parent block whose width I change using

watch: {
    "$i18n.locale": () => {
      document.getElementById("nav").parentElement.style.width =
        (100 * document.getElementById("nav").scrollWidth) / getMinSide() +
        "vmin";
    },
  },

function getMinSide() {
  if (
    document.documentElement.clientWidth < document.documentElement.clientHeight
  ) {
    return document.documentElement.clientWidth;
  } else {
    return document.documentElement.clientHeight;
  }
}

However, the words seem to be translated asynchronously, and sometimes the length of untranslated words is counted. How to make it so that the length is calculated only after the translation is completed?