Alex

Вот как это делать согласно лучших практик:

<template>
<div>
    <!-- В шаблоне не вызывают какие-либо функций. Только выводят готовые значения -->
    {{localeDate}}
</div>
</template>

<script>
{
    data: () => ({
        // Дата хранится в виде числа. Не обязательно в state компонента. Но и в других местах тоже
        date: 1580558031264,
    }),
    
    computed: {
        localeDate() {
            // Конвертируем число в строку. Для этого существуют специальные методы
            // toLocaleDateString() или toLocaleString() или toLocaleTimeString()
            // Итоговая строка будет зависеть от локализации системы пользователя. 
            // Для русской локали это будет "01.02.2020", 
            // для американской "2/1/2020", 
            // для немецкой — "1.2.2020"
            // Вы НЕ должны устанавливать формат даты самостоятельно
            return (new Date(this.date)).toLocaleDateString() 
        },
    },

    // Если нужно изменять дату в реальном времени вешаем таймер
    created() {
        this.intervalId = setInterval(() => this.date = Date.now(), 1000); // Обновляем значения не чаще раза в секунду. А то и реже.
    },

    // Если повесили таймер, то его нужно отключать
    beforeDestroy() {
        if (this.intervalId) clearInterval(this.intervalId)
    },
}
</script>

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

Да как-то так

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

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

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

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

Кропнуть текст с троеточием вконце.
https://css-tricks.com/almanac/properties/t/text-o...

https://learn.javascript.ru/task/random-int-min-max

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...

Полагаю проблема тут в том, что вы отправляете данные 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>