Событие язык изменился vue cli + i18n
 

Здравствуйте, я пытаюсь используя

watch: {
    "$i18n.locale": () => {
      document.getElementById("nav").parentElement.style.width =
        document.getElementById("nav").scrollWidth+"px";
    },
  },

получить длинну div с переведенным словом, однако похоже перевод осуществляется асинхронно и я ловлю длинну ище не переведенного слова, существует ли событие что документ переведен

fori,

setTimeout с нулевой задержкой

Спасибо, но к сожалению не получилось((
У меня язык меняет другой компонент, а здесь все не коректно ловится scrollWidth...
Пример минимального кода проблеммы

<i18n>
{
  "en": {
    "SIGN_IN": "SIGN",
    "SIGN_UP": "SIGN",
    "RESTORE": "RESTORE"
  },
  "ru": {
    "SIGN_IN": "ВОЙТИ",
    "SIGN_UP": "РЕГИСТРАЦИЯ",
    "RESTORE": "ВОСТАНОВИТЬ"
  }
}
</i18n>

<template>
  <div class="frame">
    <div class="nav" id="nav">
      <label>
        <input type="radio" name="auth" />
        <span>
          {{ $t("SIGN_IN") }}
        </span>
      </label>
      <label>
        <input type="radio" name="auth" />
        <span>
          {{ $t("SIGN_UP") }}
        </span>
      </label>
      <label>
        <input type="radio" name="auth" />
        <span>
          {{ $t("RESTORE") }}
        </span>
      </label>
    </div>
  </div>
</template>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.frame {
  display: flex;
  flex-direction: column;

  background: green;

  .nav {
    display: flex;
    padding: 7vmin 5vmin;

    label {
      font-size: 2.5vmin;
      margin: 0 1vmin;
      transition: opacity 0.2s ease;
    }
  }
}
</style>

<script>
export default {
  name: "Auth",

  watch: {
    "$i18n.locale": () => {
setTimeout(() => {
let b = /*здесь странности*/
        (100 * document.getElementById("nav").scrollWidth) / getMinSide() +
        "vmin";
      document.getElementById("nav").parentElement.style.width = b;
});
    },
  },
};
function getMinSide() {
  if (
    document.documentElement.clientWidth < document.documentElement.clientHeight
  ) {
    return document.documentElement.clientWidth;
  } else {
    return document.documentElement.clientHeight;
  }
}
</script>

Расчет длинны при смене языка ведет себя не коректно...

Полный код компонента

а код?

Из файла-полного кода я вырезал
watch и id="nav" так как они ведут себя странно. Сейчас полный код работает стабильно но без анимации ширины при изменении длинны слов.
Обрезаный код просто ведет себя странно (scrollWidth от id="nav" некоректно считаются) при изменении языка...
Суть в анимированом уменшении-увеличении длинны родительского елемента с [class="frame"]

Во первых: для получения nav используйте ref. Во-вторых: nextTick.

Позвольте спросить в каком контексте нужно вызвать $nextTick

watch: {
    "$i18n.locale": () => {
      this.$nextTick(() => { //now this = undefined // if procces.$nextTick isn't working too
        alert("nextTRick");
      });
    },
  },

Не используйте стрелки если не знаете как они работают.