Django提供的Vue中未呈现的模板[副本]

我有一个用于后端的Django应用程序,它以Vue作为前端呈现模板。我在django中的视图代码包含以下部分:

# thing/views.py
def index(request):
    template = loader.get_template('thing/index.html')
    return HttpResponse(template.render({}, request))

# thing/urls.py
from django.views.generic import TemplateView

urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html')),
]

# some other files that complete the project are not included

在 index.html 有以下代码:

<div id="app">
    <p v-if="quotaRemaining > -1">
        Remaining: {{ quotaRemaining }}
    </p>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            quotaRemaining: 42,
        },
    });
</script>

访问此页时呈现的唯一内容是:

剩下的:

而我却希望

剩余:42

为什么Django提供的Vue模板没有正确呈现?我该怎么做?