Как можно создать виртуальный DOM по аналогии с React, но на vanilla js?

Посмотрите репозиторий: https://github.com/Matt-Esch/virtual-dom

Он отлично даёт представление о том как это сделать.

Основные положения:

• Вам нужно иметь представление о вашей разметке в виде js объектов. Хранить их нужно в удобной структуре, над которой можно будет исполнять операции (обычно HTML элементы хранят как дерево, но можете придумать что-то своё).
• Сравнение. Вам нужен эффективный алгоритм, который позволит сравнивать структуры. По сути это та же работа над js структурой, будь то обход дерева или какие-то ваши оптимизации с использованием hashmap и прочего.
• Обновление (patching). То как вы будете применять изменения на странице после сравнения. Тут по сути вы работаете со стандартным DOM, но опираясь на свою структуру элементов. Добавляете, удаляете, изменяете.

Формально там ничего супер сложного нет, т.е. вы работаете с обычным DOM API, используете стандартные: appendChild, addEventListener и пр. Просто берёте на себя ответственность за действия движка рендера, как бы помогаете ему эффективно исполнить его задачу. Проблема здесь в том, что сам движок писали не глупые люди и далеко не факт, что вы сможете сделать эффективнее, но тем не менее это возможно.