vue模板和django模板语法{{}}冲突问题

描述：
django +vue实现前后台开发时，通过vue.js调用django后台代码，然后渲染Html模板，发现数据总是无法渲染成功

 <div id='demo'>
  {{info}}
</div>

info始终无法显示

需要verbatim标签进行转义

如下所示：

 <div id='demo'>
 {% verbatim %}
 {{info}}
 {% endverbatim %}
</div>

<script type="text/javascript">
   var vm = new Vue({
       el: "#demo",
       data: {
           phone: '',
           info: null,
           data: null,
       },
       methods: {
           submit: function () {
               // axios.get('/api/phone/detail/step', {
               axios.get('{% url "api:phoneStep" %}', {
                   params: {
                       phone: document.getElementById('p1').value,
                   },
                   headers: {
                       'Content-Type': 'application/x-www-form-urlencoded',
                       'X-CSRFToken': '{{ csrf_token }}',
                   }
               }).then(response => {
                   this.info = response;   // 获取返回值
                   this.data = this.info.data.data;  //获取返回体某个字段的值
                   str = JSON.stringify(this.info, null, 4);  //转换成字符串json
                   console.log("str:", str);
                   output1('code', syntaxHighlight(str))
               }).catch(function (error) {
                   console.log(error);
               });
           },

       },
   });
</script>