Привязка приложения vue js к шаблону django не отображает содержимое

Я пытаюсь привязать vue js компонент в HTML файл шаблона django, но он не показывает никакого содержимого. Я не получаю никакой ошибки. Просто пустой компонент.

Вот мой HTML шаблон django:

{% load render_bundle from webpack_loader %}
{% render_bundle 'product-filter-app' %}

{% block section_more %}

<section id="section_more" class="guide_section">

    <div id="product-filter-app">
        <product-filter-app></product-filter-app>
    </div>

</section>

{% endblock %}

Вот мое приложение vue js. main.js

import Vue from 'vue'
import * as Sentry from '@sentry/browser'
import 'vue-select/dist/vue-select.css'
import ProductFilterApp from './ProductFilterApp'
import { sentryOptions } from '@/utils/settings'
if (process.env.VUE_APP_MODE !== 'dev') {
  Sentry.init(sentryOptions)
}
new Vue({
  components: { ProductFilterApp }
}).$mount('#product-filter-app')

Здесь ProductFilterApp.vue

<template>
  <h1>Test</h1>
</template>
<script>
export default {
  name: 'ProductFilterApp',
  components: {
  },
  props: {
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>
<style scoped>
</style>

Web-pack генерирует приложение успешно, нет никаких ошибок, но просто показывает пустой компонент, как на снимке экрана.

Любая помощь будет оценена по достоинству.

new Vue({
  el: '#product-filter-app',
  components: { ProductFilterApp },
  template: '<ProductFilterApp/>'
})