How to use Vuejs SFC (single file component) in django

Question

fil1.vue

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg">
</template>

I would like to render this in my Django template.

Previously with normal vue components I was able to do use them as follows:

JS file:

Vue.component('comp1', {...})

django html template:

<comp1> </comp1>

Update 04-08-2022

I was able to get App.vue mounted on django div element with id=app -My github repo

• The only way this works is when I set id=app in homepage.html . Is there another way of rendering App.vue in django homepage.html ?
• Is there a way to use component <HelloWorld> directly in my django template ?

If someone can provide a link to a public github repo that has used SFC with django that would be helpful.