hannyto1111

app.directive(directives);

Это ещё что за чертовщина? Открываете документацию, смотрите, какие параметры принимает directive.

Если определить position: absolute для box-4, этот элемент покинет нормальный поток документа. Но он остается на своем месте, так как координаты смещения не заданы

https://proglib.io/p/css-position-absolute/

Если вы сделаете третий див, то он уйдет под второй, у которого position:absolute. Так как он вышел из основного потока

@click="()=>messages.delete(mapKey)"

require не "берёт картинки из папки", require обрабатывает картинки loader'om и выдаёт в ответ результат. Статический результат, который попадает в бандл.
require(`./img/${name}.png`);- не значит "взять картинку по имени name из папки img во время исполнения", это значит "во время компиляции взять все картинки с маской './img/*.png', обработать loader'ом, получить для каждой статическую ссылку, и положить в бандл".
loader'ы по умолчанию превращают маленькие картинки в data:uri строки, а большие перекладывают в папочку imgs и переименовывают с хэшем, возвращая путь. Но это по-умолчанию, а так они способны много всякой магии творить.

Суть: новые картинки ты, которых не было во время сборки, таким образом не подцепишь.
Но это и не нужно, картинки лежащие в папке public копируются в результирующую папку как есть и доступны по /name.png без require, просто через обычный html и css.

В vue 3 для реактивости юзаются Proxy, там set не нужен, просто присваивай и всё.)