В приложениях VueJS используется {{ varname }} для обработки шаблонов. В Jinja2 и Django шаблонах при рендеринге шаблона также используются фигурные скобки. Из-за этого возникает конфликт. Есть 3 способа решения проблемы.

VueJS — заменить фигурные скобки на что то другое

<!-- js файл -->
new Vue({
  delimiters: ['{*', '*}'],
  data: {
    VueVAR: 'test'
  }
})

<!-- html файл -->
<div id="app">
  {* VueVAR *} <!-- vuejs -->
  {{ name }}  <!-- переменная в Jinja2 или Django шаблоне переданная из views.py -->
</dev>

Использовать RAW в html для Jinja2

<!-- js файл -->
new Vue({
  data: {
    VueVAR: 'test'
  }
})

<!-- html файл -->
<div id="app">
  {{ VueVAR }}  <!-- vuejs -->
  {% raw %}
     {{ name }}  <!-- переменная в Jinja2 из views.py -->
  {% raw %}
</dev>

Для Django templates поменять фигурные скобки

# в файле setting.py
VARIABLE_TAG_START = '{*'
VARIABLE_TAG_END = '*}'

<!-- js файл -->
new Vue({
  data: {
    VueVAR: 'test'
  }
})

<!-- html файл -->
<div id="app">
{{ VueVAR }} <!-- vuejs -->
{* name *} <!-- переменная в Django template из views.py -->
</dev>

В своих проектах я всегда использую первый способ.