Ваня

Ну Вы перемещаете на 50 пикселей, тут как не крути - плавно не будет.

Есть 2 варианта:
Перемещать через css transition. Тогда нужно указать для этого блока transition: left 0.3s linear
Либо понизить шаг перемещения, а так же воспользоваться функцией requestAnimationFrame

P.s. ну и не зачем постоянно искать элемент через querySelector. Найдите его один раз, сохраните в переменную и пользуйтесь.

Точно так же, как и всё остальное - добавляете описание в props, используете v-bind для привязки функции к экземпляру дочернего компонента.

Но вообще, так в vue делать не принято.
Принято иначе:

1. В дочернем компоненте генерируете событие: <button @click="$emit('click')".
2. В родительском на него подписываетесь: <component @click="onClick".

Хотя, конечно, чисто технически это тоже будет передачей функции - назначенные в родителе обработчики событий доступны в дочернем компоненте через свойство $listeners, так что вместо $emit('click') или (если надо передать родителю какие-то данные) $emit('click', аргумент) можно (но не нужно) написать $listeners.click или $listeners.click(аргумент).

Родителю

grid-template-columns: repeat(3, 1fr);
grid-gap: 5px

Первому элементу:
grid-column: 1/-1;
либо через span, как хотите.

https://jsfiddle.net/vasm5p1w/

Если я правильно понял назначение кодов
https://regex101.com/r/Uqf7ty/1

Либо ещё более корректную информацию по виду данных до

nl2br и str_replace работают как надо(перенос строк и замена bbcode)

и вида данных после этой обработки.
А так же вид желаемого.
Решение может быть разным именно из - что имеем и что хотим

Если нужны просто цветные полосы можно просто background подставить.
codepen.io/egorava/pen/zKGJLW

Наиболее правильно сделать всё, что сказали выше +
1. выключить авторизацию по паролю(только через сертификат)
2. в iptables поставить доступ к ssh только с определённых ip
3. в ssh продублировать доступ с определённых ip
4. Для nginx скрыть версию, для php тоже, для системы тоже почитать как она скрывается
5. настроить fail2ban для всех открытых сервисов с авторизацией
6. на всех сервисах ограничить количество одновременных соединений, тут везде по-разному. limits и прочее

Для параноиков всегда можно сделать на сервере openvpn на 443 порту, разрешить совместное использование оного с nginx, сбацать себе сертификат неэкспортируемый, передать его сложным путём через дробленный архив с паролем, затем импортировать используя пароль в закрытое хранилище устройства и сидеть с него в ssh на сервер.

1. SSH - на нестандартный порт, запрет логина рутом (логиниться удаленно простым пользователем и дальше su/sudo). Подбор пароля рута к SSH на 22-м порту - самый основной вектор атаки.
2. Регулярные обновления по безопасности.
3. По безопасной настройке ngx - куча инфы в сети.

SELECT * FROM `tablename` WHERE `mail`=$_POST['mail'];
Вернет или массив с данными или null.
Экранируйте и обрабатывайте сами.