title: Vue.js in Django Templates
body: <p>I am trying to use Vue.js in Django templates. One such template is the following:</p>
  
  <pre><code>{% load static %}
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="myApp"&gt;
          &lt;span&gt;Hello [[ message ]]&lt;/span&gt;
          &lt;div id="map"&gt;&lt;/map&gt;
      &lt;/div&gt;
      &lt;script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://v1.vuejs.org/js/vue.js"&gt;&lt;/script&gt;
      &lt;script src="{% static 'js/script.js' %}"&gt;&lt;/script&gt;
      &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY&amp;callback=initMap"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I changed Vue's interpolation delimiters to <strong>[[ ]]</strong> to avoid conflict with Django. My <code>script.js</code> looks as follows:</p>
  
  <pre><code>$(function() {
      var app = new Vue({
          el: '#myApp',
          delimiters: ['[[', ']]'],
          data: {
              message: 'Hello, world!'
          }
      });
  });
  </code></pre>
  
  <p>Unfortunately, the HTML rendered contains <code>[[ message ]]</code>. Has anyone else faced a similar issue?</p>