Binding vue js app to django template not showing any content - html

Question

I am trying to binding vue js component into django HTML template file, but it is not showing any content. I am not getting any error. Just blank component.
Here is my django HTML template:
{% 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 %}
Here is my vue js app.
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')
Here is ProductFilterApp.vue
<template>
<h1>Test</h1>
</template>
<script>
export default {
name: 'ProductFilterApp',
components: {
},
props: {
},
data () {
return {
}
},
methods: {
}
}
</script>
<style scoped>
</style>
Web-pack is generating app successfully there is not any error but just showing empty component as per screen shot.
Any help will be appreciated.

Answer 1

Actually, you shouldn't really even need to include the template in your view, as long as your element with ID of #product-filter-app is there. Give this a shot:
new Vue({
el: '#product-filter-app',
components: { ProductFilterApp },
template: '<ProductFilterApp/>'
})
And you can remove <ProductFilterApp><ProductFilterApp/> from your view.