A Vue variable's value can show a Django template. For that, we first need to create a vue variable. Vue app's or component's, inside the data() function, we declare variables.

Declaring vue variable:

<script>
    let app = Vue.createApp({
        delimiters: ["[[", "]]"],
        data() {
            return {
                "message" : "Vue is connected.",
                "email" : "youremail@gmail.com"
            }
        }
    })
    app.mount('#vue_app')
</script>

Here, message and email are two variables. To display variable in django template 

Syntax:

[[ variable_name ]] 

{% extends "base.html" %}
{% load static %}
{% block content %}
<div id="vue_app">
    <h1>[[ message ]]</h1>
    <p>[[ email ]]</p>
</div>

<script src="https://unpkg.com/vue@3"></script>

<script>
    let app = Vue.createApp({
        delimiters: ["[[", "]]"],
        data() {
            return {
                "message" : "Vue is connected.",
                "email" : "youremail@gmail.com"
            }
        }
    })
    app.mount('#vue_app')
</script>

{% endblock content %}

Output: