Alex

Полагаю проблема тут в том, что вы отправляете данные POST запросом, но эти данные передаёте не в теле а в GET параметре.

Попробуйте так:

fetch('json.php', {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(doc), // тип данных в body должен соответвовать значению заголовка "Content-Type"
    })

var_dump($_POST); // Проверить что приходит на сервер

Использовать v-for с v-if можно, но не рекомендуется.
При их сочетании условие применяется к каждой итерации.
<div v-for="i in index" v-if="index > 10">
Аналог

for(let i in index) {
    if (i > 10) { /* ... */ }
}

Прочитайте Это и Это

А конкретно в вашем примере достаточно сделать вот так:

<p>Имя: {{ user }}{{user === 'Tom' || user === 'Misha' ? 9 : ''}}</p>

Или отдельным елементом:

<p>Имя: {{ user }} <span v-if="user === 'Tom' || user === 'Misha'">9</span></p>

Вам ничего не мешает делать по старинке: один глобальный файл с глобальными стилями.

Ну, или иначе. Если вы хотите инкапсулировать стили — тогда все они дожны быть внутри компонентов.

А если у нас есть две совсем одинаковые кнопки, которые отличаются лишь цветом + находятся в разных компонентах?

Глобальные стили или отдельный компонент с кнопкой.

Как наиболее правильно с точки зрения good practice назвать имена классов?

На самом деле как вам удобно. Лично я использую следующий паттерн

class=" component-root <component-name>-component-root "

UPD.
Если есть необходимость передать какое-то свойство в нутрь компонента, то можно сделать это через кастомные свойства:

<style scoped>
.button {
    color: var(--text-color, green)
}
</style>

<button-component style="--text-color: blue"/>

Можно. Но лично я предпочитаю

const a =.....;
const b = .....;
const c = ......;

Так в системе контроля версий лучше смотрится при внесении изменений

function count(arr){
  const map = new Map();
  arr.forEach(i => map.set(i, (map.get(i) || 0) + 1))
  return map;
}

Что для этого нужно диктуют работодатели. Определите примерную ЗП которую хотите. Посмотрите список вакансий предлагающую её. Просмотрите их требования.

У всех работодателей разная специфика. Кто-то штампует лендинги. Тут важным критерием будет насколько быстро вы можете сверстать такой, и не очень важно какие технологии вы используете.

Кто-то выполняет разработку сайтов под ключ на WordPress. Тут вам нужно помимо помимо знаний html, css понимать как работает ВП: Какой html он генерирует при выводе меню, в каком виде он создаёт виджеты, какие теги он генерирует сам, а какие должны прописать вы. И т. д.

У кого-то может быть один крупный корпоративный сайт. Тут вам пригодятся другие навыки.

для этой сферы необходимо: html, css, botstrap. flexbox, grid, sass,javascript, jQuery, ES6, React.js, git

Еееее ... нет.

• html, css — Основные технологии для верстки.
  
• flexbox, grid — отдельные свойства стилей. Должны изучаться вместе со всем остальным css.
  
• javascript — Будет большим плюсом для верстки.
  
• ES6 — Спецификация javascript. Должна изучаться вместе со всем остальным javascript. Это если вы хотите более серьёзно расти в этом направлении.
  
• git — Будет полезен лично вам и не плохим плюсом в резюме при работе над большими проектами. При конвеерной верстке лендингов этого от вас навряд кто-то будет требовать.
  
• botstrap — Набор готовых стилей. Требуется не всегда и не везде.
  
• jQuery — Абстракция над скриптами. Требуется не всегда и не везде.
  
• sass — Препроцессор. Альтернатива css. Требуется не всегда и не везде.
  
• React.js — javascript Фреймворк. Требуется не всегда и не везде.
  

Стоит ли задумываться о платных курсах

Если видите, что того что есть в интернете вам не хватает — да. Если понимаете что без наставника у которого можна переспросить или попросить объяснить какой-то момент вы не справляетесь — да.

За сколько я могу освоить эту отрасль для того, чтобы найти работу и развиваться дальше?

Вы хоть уже можете начать поиски работы. Есть работодатели готовые нанимать новичков, за дешево и давать им базовые знания. И ставить на простые задачи.

задумалась о фрилансе

На ваше усмотрение. Но будьте готовы к большой конкуренции. С фрилансом такое дело, что вы и разработчик и менеджер по работе с клиентом. В то время как в нормальных организациях, обязанности по работе с клиентом ложатся на другого человека.

или дистанционной работе, это реально, или лучше сперва работать на компанию

Всё зависит от специфики компании. Как вам будет удобнее. Но если хотите развивать навыки коммуникации я бы не брал удалёнку.

UPD.
По личному опыту добавлю, что обучение само по себе это хорошо. Но не очень полезно. Но вот обучение в рамках решения каких-то задач — куда лучше.
Это как с советами — он должен быть к месту. Если я просто расскажу вам что есть метод Element.scrollIntoViewIfNeeded() то скорее всего вы забудете о нем через пару дней. Но вот изучив его пытаясь найти решение какой-то проблемы — запомните о нем надолго.

Так, что лучше всего найти какую-то работу и развиваться в рамках поставленных задач. Когда поймёте, что перестали расти — меняйте работу. У вас уже будет какой-то опыт и портфолио.

Так же хобби проекты — как для меня, отличный способ "прокачки". Но это только в том случае если у вас есть страсть и желание искать новые способы, технологии для развития и улучшения своего детища.

Используйте то же самое условие. Почему нет?
<?php if (!empty($ocfilter_pages)) { ?>

<?php if (!empty($ocfilter_pages)) { ?>
<div class="row row-hide">
        <div class="col-lg-12">
        <p class="heading"><span>Дополнительные категории</span></p>
          <div class="wrapper333">						
            <input type="checkbox" id="button">
            <div class="xpandable-block">							
              <ul class="list-inline">
                <?php foreach ($ocfilter_pages as $ocfilter_page) { ?>
                  <li>
                    <?php if ($ocfilter_page['selected']) { ?>
                    <strong><?php echo $ocfilter_page['text']; ?></strong>
                    <?php } else { ?>
                    <a href="<?php echo $ocfilter_page['href']; ?>"><?php echo $ocfilter_page['text']; ?></a>
                    <?php } ?>
                  </li>
                <?php } ?>
              </ul>

            </div>
            <label for="button">Показать все...</label>
          </div>
        </div>
      </div>

            <?php } ?>

Попробуйте пробрасывать стиль через кастомные свойства. Примерно так

<div 
                style="width: 100px; height: 100px; background: red;" 
                : style=" '--matrix: ' + computedMatrix"
            ></div>

.workspase {
        width: 800px;
        height: 500px;
        border: 2px solid black;
transform: var(--matrix);
    }

запросы к API надо делать внутри actions Vuex (якобы это best practices). Однако, я совершенно не понимаю, всегда ли это необходимо

state нужен в тех случаях, когда доступ к списку пользователей вам нужен не в одном компоненте, а как минимум в двух. В таких случаях без него никак.

Если вы уверены, что список пользователей вам нужен только в одном компоненте — тогда все данные нужно хранить именно в нем.

Важно понимать разницу:

• Данные в Vuex "существуют" всегда и всегда занимают часть памяти на клиенте.
  
• Данные в компоненте "существуют" только когда существует компонент. И будут удалены если удалится компонент.
  

Если ваше приложение завязано на списке пользователей, и несколько компонентов используют эти данные, то без Vuex вам будет сложно.

В то же время, если список пользователей вам нужен только для какого-то виджета, который отображается не всегда — тогда хранить данные в Vuex не стоит.

См. также

Подскажите, что делать дальше, после того как запрос ушел на сервер и мы получили ответ, что пользователь добавлен?

Это вопрос уже совершенно другого направления.

Создать и вызвать мутацию addUser для добавления нового пользователя в state?

Да. Actions для того и существует, чтобы вы могли выполнить какие-то асинхронные запросы, доп проверки, валидацию данных, определить нужно ли что-то сохранить в state и если нужно — что именно. Здесь вы можете добавить пользователя, проверить добавился ли он, выполнить дополнительный запрос на извлечение информации о нем. И тп.
А мутация — непосредственно алгоритм изменения состояния.

в чем тогда смысл нашего state?

Локальная, быстрая, реактивная копия данных с сервера на клиенте.

при любом действии все равно необходимо загружать данные с сервера

Это уже вопрос к серверу. И к его API. Есть много разных технологий синхронизации данных между сервером и клиентом.

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

Запрос на извлечение данных выполняется только при первом обращении

var data = []
$('#txt-search').keyup(async function(){
            var searchField = $(this).val();
            if(searchField === '')  {
                $('#filter-records').html('');
                return;
            }

            if (!data.length) {
                data = await fetch('url/to/file.json').then(r => r.json())
            }

            var regex = new RegExp(searchField, "i");
            var output = '<div class="row">';
            var count = 1;
              $.each(data, function(key, val){
                if ((val.employee_salary.search(regex) != -1) || (val.employee_name.search(regex) != -1)) {
                  output += '<div class="col-md-6 well">';
                  output += '<div class="col-md-3"><img class="img-responsive" src="'+val.profile_image+'" alt="'+ val.employee_name +'" /></div>';
                  output += '<div class="col-md-7">';
                  output += '<h5>' + val.employee_name + '</h5>';
                  output += '<p>' + val.employee_salary + '</p>'
                  output += '</div>';
                  output += '</div>';
                  if(count%2 == 0){
                    output += '</div><div class="row">'
                  }
                  count++;
                }
              });
              output += '</div>';
              $('#filter-records').html(output);
        });

Или можно так: Запрос на извлечение данных выполняется сразу при загрузке

var dataPromise = fetch('url/to/file.json').then(r => r.json())

$('#txt-search').keyup(async function(){
            var searchField = $(this).val();
            if(searchField === '')  {
                $('#filter-records').html('');
                return;
            }

            const data = await dataPromise;

            var regex = new RegExp(searchField, "i");
            var output = '<div class="row">';
            var count = 1;
              $.each(data, function(key, val){
                if ((val.employee_salary.search(regex) != -1) || (val.employee_name.search(regex) != -1)) {
                  output += '<div class="col-md-6 well">';
                  output += '<div class="col-md-3"><img class="img-responsive" src="'+val.profile_image+'" alt="'+ val.employee_name +'" /></div>';
                  output += '<div class="col-md-7">';
                  output += '<h5>' + val.employee_name + '</h5>';
                  output += '<p>' + val.employee_salary + '</p>'
                  output += '</div>';
                  output += '</div>';
                  if(count%2 == 0){
                    output += '</div><div class="row">'
                  }
                  count++;
                }
              });
              output += '</div>';
              $('#filter-records').html(output);
        });