Вёрстка в index.html проходит сразу через два шаблонизатора — сначала Django на сервере, затем Vue.js на фронтенде. И там и там для подстановки используются фигурные скобки {{…}}, что может привести к неожиданному, очень странному результату.
Откройте index.html и найдите там код, который Django может принять за свои места для подстановки. Выглядеть должно так: {{…}} или {%…%}.
Избежать конфликта можно с помощью шаблонного тега verbatim. Воспользуйтесь тем фактом, что Vue.js влияет только на часть вёрстки — ту, что используется в качестве шаблона:
el: '#sidebar-app',
template: document.getElementById('app-template').innerHTML,
...
});Если указан атрибут template, то Vue.js берёт шаблон из соответствующей строки. Метод document.getElementById ищет в DOM дереве элемен с указанным id, а innerHTML позволяет добраться до его содержимого.
el — это элемент, внутри которого Vue.js поместит результат рендера. Строка #sidebar-app — это селектор того элемента.
Если атрибут template не указан, то шаблон будет взят из элемена el.
Загрузить страницу в браузере и откройте её исходный код — View page source. Проверить вёрстку внутри тега '#sidebar-app', там должны остаться размеченные места с подстановкой {{…}}. Если их нет - значит вмешалась Django и всё сломала.