Alex

Так просто импортируйте экземпляр класса там где он нужен.
А вообще- вот https://youtu.be/42GnGAa3654

Да как-то так

Собственно почему vuex не подходит для огромного числа коммитов?

Потому что при каждом комите Vue проходится по всем зависимостям, пересчитывает их, пересчитывает состояния всех компонентов, изменяет DOM где это нужно. А это всё блокирующие операции.

Лучше используйте EventBus : транслируйте разыне события, не просто "drag" но и "dragstart" и "dragend". Передавайте с событиями нужные координаты. И создавайте компоненты-подписчики на нужные события.

Отдельно можете добавить тротлинг. Не большой, буквально до 100 миллисекунд. Уже это существенно уменьшит количество комитов, а интерфейс останется таким же "мгновенным"

https://stackoverflow.com/questions/4852017/how-to...

Должно быть примерно так:

<input type="text" v-model="picked">
<button @click="picked = 'button clicked'">

То есть у вас есть переменная. Её значение передаёте в input. А потом где хотите это значение изменяете

https://medium.com/front-end-weekly/webpack-and-dy...

Использовать 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"/>

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

<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. Есть много разных технологий синхронизации данных между сервером и клиентом.

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

Параметры для динамических путей можно указывать так:
<router-link :to = "{name: '', params: {}}" >

Например:

// router.js
{
  name: 'product'
  path: '/:model'
}

// component.vue
<router-link :to = "{
  name: 'product', 
  params: {
    model: 'Телефон-Самсунг'
  }
}" >