Тоесть, если таб пытается поставить фокус на елемент который пренадлежит div-у — e.preventDefault(), если таб пытается установить фокус на елемент который не принадлежит div-у — (пропустить событие и разрешыть поставить фокус на такой елемент)
Узнать принадлежит ли елемент родителю, таб на который надо блокировать можно по функции (аналог jquery-ного варианта parentHas)

parentsHas(el, target) {
      let current = el;
      while (
        current.parentNode != null &&
        current.parentNode != document.documentElement
      ) {
        if (current == target) {
          return true;
        } else {
          current = current.parentNode;
        }
      }
      return false;
    },

fori,
не могу подсказать, логика слишком заумная.

fori,
попробую спросить по другому, чем предложенный код не устроил?

В компонетне я поставил ваш код в mounted

mounted() {
    document.addEventListener("keydown", function (event) {
      let { target, code } = event;
      if ((target = target.closest(".body") && code == "Tab"))
        event.preventDefault();
    });
  },

При нажатии таб - таб попадает на инпут, дальнейшые нажатия игнорироются
Но я хотел бы сделать так чтоб таб работал на отображающейся странице компонента (opacity:1) и не работал на не отображающейся (opacity:0)
Если вам будет интересен результат - полный код компонента в вложении (i18n + vue 2 cli)

fori,
пока без вариантов ...