Ayuda con integracion con Django y Vuejs 3

Hola Colegas

Llevo dos dias intentando integrar Django con Vue 3 y en parte lo he logrado pero no como quisiera.

Escenario. La idea es utilizar Vue 3 para los componentes que requieren Javascript y que no son importantes para el SEO como formularios de reservas, etc…

Realice la integración utilzando django-webpack-loader para injectar el bundle en las plantilla de django.

Este es el archivo vue.config.js

const BundleTracker = require("webpack-bundle-tracker");

module.exports = {
publicPath: “http://0.0.0.0:8080/”,
outputDir: ‘./dist/’,

pages: {
	main: {
		// entry for the page
  entry: 'src/main.js',
}
},

chainWebpack: config => {

config.optimization
  .splitChunks(false)

config
  .plugin('BundleTracker')
  .use(BundleTracker, [{filename: './webpack-stats.json'}])

config.resolve.alias
  .set('__STATIC__', 'public')

config.devServer
  .public('http://0.0.0.0:8080')
  .host('0.0.0.0')
  .port(8080)
  .hotOnly(true)
  .watchOptions({poll: 1000})
  .https(false)
  .headers({"Access-Control-Allow-Origin": ["\*"]})

}
};

este es el contenido del main.js que es punto de entrada

import { createApp, reactive, ref } from 'vue'

const app = createApp({
el: ‘#app’,
delimiters: [’[[’, ‘]]’],
setup() {

const data = {
  returned_task: ref(''),
  temp_task: ref(''),
  modify_index: ref(-1),
  tasks: reactive([]),
}

const methods = {
  select: (index) => {
    if (data.modify_index.value === index){
      data.modify_index.value = -1;
    } else {
      data.modify_index.value = index
      data.temp_task.value = data.tasks[data.modify_index.value]
    }
  },
  deleteSelected: () => {
    data.tasks.splice(data.modify_index.value, 1);
    data.modify_index.value = -1;
  },
  updateSelected: () => {
    data.tasks.splice(data.modify_index.value, 1, data.temp_task.value);
    data.modify_index.value = -1;
  }
}

// created lifecycle event is not needed  but let's mock a delay
setTimeout(() => {
  data.tasks.splice(0, 0, ...['do this 🐱‍🐉', 'and that 🤳']);
}, 120);


return {
  ...data,
  ...methods
}

}
})

app.mount(’#app’)


y esta en la plantilla html

<div id="app">
	[[modify_index]]
	<ul>
		<li v-for="task in tasks">[[task]]</li>
	  </ul>
</div>

Cuando correo el proyecto, no se muestra nada, el div se queda en blanco… Agradeceria si alguien tiene alguna experiencia…