Как правильно проверять на валидность значение input и правильно выстроить ее архитектуру?

Форма - это семантично и удобно.

Судя по примерам и звездам на гитхабе самые лучшие решения из либ - vee-validate и vuelidate

Сам ими плотно не пользовался, так как из-за особенностей продуктовых задач было проще написать свое конкретное решение валидации :)

Почему LocalStorage is not defined?

Инициализация store в nuxt.js происходит на сервере, а localStorage - это чисто клиентская фишка.
Используйте cookie, а еще лучше посмотрите пример авторизации на офф сайте auth-external-jwt

Можно/целесообразно ли делать анимированные переходы в вебе?

Только на nuxt.js  свет клином не сошелся :) Есть и другие технологии, допустим, next.js для React, скорее всего есть что-то для Angular (не работал с ним, поэтому конкретно не могу сказать). Вот еще barba.js подсказали. Нужно просто поискать.

По второму "подводному камню": это общая проблема для сайтов, где что-то грузится дополнительно на клиентской стороне. Если взять для примера youtube, то первым делом грузится видео, а вся дополнительная информация (аналогичные видео, комментарии и тд) сначала появляется в виде полосок (заглушек), а потом заменяется на реальные данные. Кто-то реализует с помощью заглушек, кто-то вешает лоадеры (спиннеры) - это уже зависит от дизайна и изначальных требований.

Как заставить вычисляемое свойство пересчитываться по таймеру?

Сергей Соколов, повесьте вотчер на пропс. Если он изменился, то обновляйте стейт и перезапускайте таймер.

Как в компоненте получить данные из хранилища?

Судя по документации тут items принимает массив строк или массив объектов.

Может быть массив объектов или массив строк. При использовании объектов будет искать поле текста и значения. Это можно изменить с помощью item-text и item-value свойств.

Если все правильно понял, то нужно подготовить правильный массив объектов с ключами text и value, который передается в items.

vuex:

getters: {
    productsAutocomplete: state => {
      return state.products.map(product => ({ text: product.name, value: product.id }));
    }
  }

Как в компоненте получить данные из хранилища?

Мне кажется у Вас отсутствует базовое понимание массивов и объектов в JS, а так же нежелание читать документацию по vue, где все прекрасно описано с подробными примерами. Без обид :)

Если товар роутится по id, то конечно id надо передавать в выпадающий список. И плюс зачем было создавать отдельный getter для productName, когда нужны еще дополнительные значения. Все это лежит в массиве products.

Почитайте про v-for, а затем посмотрите на структуру своего массива products.

Как в компоненте получить данные из хранилища?

Метод .map как раз и возвращает новый массив.

products - это массив объектов, надо раскрыть этот объект и посмотреть по какому ключу лежит имя.

Почему возникает ошибка?

В моем понимании "грамотный разработчик" организовал бы этот код так:
1. Сделал бы плоскую структуру с state, потому что с ними проще работать, да в данной компоненте есть всего лишь 1 инпут

state = {
  value: '',
  isActive: false,
  // другие стейты
};

2. Переименовал бы хендлеры, но это вкусовщина от из airbnb стайлгайда :)

<input type="text"
  className="floating-label-input"
  value={this.state.name.value}
  onFocus={this.handleFocus}
  onBlur={this.handleBlur}
  onChange={this.handleChange}
/>

3. Разнес бы логику для значения инпута и активного класса:

handleChange = ({ target: { value } }) => this.setState({ value })

handleFocus = ({ target: { value } }) => this.setState({ isActive: true })
  
handleBlur = ({ target: { value } }) => {
  if (value !== '') return;
  this.setState({ isActive: false });
}

Вопрос про класс и его прототип?

Если важно понимание, то я бы задумался еще над следующими вопросами:
1. Зачем записывать переменные modal и overlay в контекст, если они используются только внутри функции и не изменяются ее в рамках (т.е. это просто константы, а не стейты)
2. Зачем добавлять методы open и close путем патча прототипа, когда их можно объявить прямо внутри функции?
3. Зачем нужен метод close, который:
а) Является приватным (хотя в JS это понятия пока условное)
б) Используется всего лишь один раз

Если не брать во внимание ненужность jq (да, я хейтер jq и за pure JS где это возможно), можно вот так отрефакторить функцию Popup:

function Popup(obj){
    var modal = $(obj.modal);
    var overlay = $(obj.overlay); 

    this.open = function (content) {
        overlay.addClass('open'); 
        modal.addClass('open');
        modal.html(content);
    }
   
   overlay.on('click', function () {
       overlay.removeClass('open'); // и сразу никаких проблем с контекстом :)
       modal.removeClass('open');
   }); 
}