Гидратация VueJs PHP

Всем привет, народ помогите разобраться с Vue, для СЕО необходимо генерить код html на сервере, на клиенте минимальный функционал с vuejs: фильтровать, скрывать/показывать и тд.

<?php /** @var array $direction_list */
        foreach ($direction_list as $direction) : ?>
            <div class="country">
                <img src="<?= $direction['CountryImageUrl'] ?>" alt="">
                <a class="name" href="<?= $direction['url'] ?>"><?= $direction['CountryName'] ?></a>
                <a class="price" href="<?= $direction['url'] ?>">от <?= $direction['MinPrice'] ?> руб.</a>
                <div class="link"><a href="<?= $direction['url'] ?>">Подробнее</a></div>
            </div>
<?php endforeach; ?>

Как с помошью Вью спарсить html и дальше работать с ним? В голову приходит только при загрузки страницы брать данные по апи и заменять весь блок со странами а потом уже работать с ним. Доки прочитал и гугл шерстил ничего адекватного. Получается только замена поможет, помогите кто хорошо разбирается во вью)