Владимир Мальков

Используйте shadow DOM, оба браузера отлично его поддерживают

В фанке create сохраняйте элемент модалки в переменную (желательно приватную, например _modal), в close() обращайтесь к этой переменной и либо делайте display = 'none', либо удаляйте сам элемент.

он использует Vue.js, а по средствам API получает данные от сервера, то это намного быстрее, чем рендеринг страницы с помощью Vue.js.

Исходя из этого - он именно то и делает, что рендерит страницу с помощью vue.
Вы, вероятно, имеете ввиду, что он использует nuxt тк именно он обычно быстрее.

Приветствую!

• 
  
• new Vue
  
• Не используй v-for на рутовом div (div с id=contact)
  
• Проверь все :key="id". Найди ошибку)
  

Приветствую. Вы немного заблуждаетесь.

по логике он должен поискать ее из функции function bar() так как там ее вызывали return foo();

Обратите внимание в каком scope находе foo. Поэкспериментируйте с функцией и перенесите ее в scope bar. Примерно так:

var x = 10;

function bar() {
  var x = 2;
  return foo();

  function foo() {
    var y = x + 5;
    console.log(y);
    return y;
  }
}

foo();
bar();
console.log(x);

Т.к foo находится в глобальном scope (в вашем исходном примере), она всегда будет использовать глобальную переменную x.

Возможно не лучший, но просто работающий метод:
При создании state, присваиваешь своей переменной null.

Потом импортишь ее

import { mapState } from "vuex"
...
computed: {
    ...mapState(['ТВОЯ_ПЕРЕМЕННАЯ'])
}

В шаблоне юзаешь v-if="ТВОЯ_ПЕРЕМЕННАЯ"

Используйте Vue Router. В хуках роутинга подгружайте данные. Опишите разные пути в соответствии с которыми и будут грузиться те или иные компоненты.

Такой опыт не стоит указывать. Как вариант, можете написать "имею опыт работы не по специальности" в графе "Дополнительная информация".

В документации не используют key у template. Все и так будет работать.

Милости просим в русскоязычную документацию по vuex. Читаем все основные понятия. Займет 15 минут, но все само собой встанет на свои места. (+ в примерах из доков почти решены ваши проблемы).

Создайте обработчик на

некий клик

Вида:

function () {
  setTimeout(300, () => {
    var span = document.querySelector('.b-span') // либо селектор по id
    span.classList.add('b-span_active')
  }
}

• Хорошие знания vanilla.js (ECMA2016+)
  
• Пре/пост процессоры css
  
• Понимание паттерна MVC
  
• JS фреймворк
  

Остальное - опционально:

• Node.js
  
• socket.io
  

А чему равен key? Дело, случаем, не в том, что вы используете v-for ... of, вместо v-for ... in?