Evgeny Kulakov

https://vuepress.vuejs.org

Надо темплейт компонента вынести отдельно в тег script:

<script type="text/x-template" id="chatTemplate">
                <section class="chat">
                    <div class="chat__messages">
                        <ul>
                            <li v-for="msg in messages"></li>
                        </ul>
                    </div>
                </section>
</script>

placeholder="{{ warning }}" -> :placeholder="warning"

Сейчас похожий проект:

бэк - django-rest-framework,
фронт - vue spa, используется vue-cli и webpack шаблон.

django стартует сервер на своем порту, vue использует dev сервер из шаблона. Взаимодействие через rest. Т.е. по сути описанный вами 2ой вариант. В папке проекта две папки: backend и frontend.

Еще делали такую штуку(правда не пользуемся ей для разработки): стартует django сервер, в нем настроены пути, так что если это не обращение к api сервера или к админке, то он отдает статику из папки frontend/dist, т.е. продакшн версию фронта.

Vue.js