Roteamento misto entre Django e Vue.js

[mikaelhadler]

Pessoal, por gentileza, alguém já passou por uma situação parecida? Gostaria de uma opnião externa.

A web app em que trabalho atualmente é em django, sendo assim, todas as rotas são feitas e pensadas para o django.

Neste meio tempo, foi incluso o Vue.js no projeto com o objetivo ter maior proveito dos componentes e recursos que o vue pode proporcionar. Neste meio tempo, eles viram a necessidade de transformar essa web app em uma SPA com vue js, porém preciso fazer isto de forma progressiva.

Sendo assim, adotei como principal estratégia o redirecionamento das rotas desconhecidas do django para uma ViewTemplate django que usa um index.html para chamar a instância do vue. A partir daí consigo utilizar os recursos de uma instância normal.

Porém, estou tendo problemas com o roteamento pelo vue-router, por algum motivo que ainda não entendi. Quando ele monta minha instância, ele chama minha component root , onde eu faço o carragamento da minha .

E é ai que o router-view e eu estou me perdendo.

Como na instância eu tenho que referenciar o entry point de montagem do vue, acredito que por algum motivo ele está se perdendo.

My router instance:

export default new Router({
  routes: [
    {
      path: '/',
      components: HelloWorld,
    },
    {
      path: '/home',
      name: 'home',
      components: Home,
    },
  ],
});

My instance vue:

new Vue({
  el: '#root',
  store,
  router,
  apolloProvider: createProvider(),
  render: h => h(App),
});

Alguém poderia dar uma visão ?