I have an existing python/django app with jinja template engine.
I have a template with a filter and a list the gets rendered correctly via server, also the filters work perfectly without javascript. (based on url with parameters)
The server also responds with json if the same filter url is requested by ajax. So it's ready for an enhanced version.
Now: I would like to make it nicer and update/rerender the list asynchronously when I change the filter based on the json response I receive.
Questions:
When I init the vue on top of the page template, it removes/rerenders everything in the app. All within the vue root element becomes white. Can I declare only parts of my whole template ( the one filter and the list) as separate vue components and combine these instances (there are other parts that are not part of the async update part vue should not take of)
Can I somehow use the existing markup of my components in jinja to be used to rerender the components again with vue or do I have to copy paste it into javascript (please no!) ?
TLDR: I don't wan't to create the whole model with vue and then prerender the whole app (modern SSR way) and vue will find out the diff.
I just want to use vue on top of an existing working django app.
I think the best method really is to split up the front and backend into two seperate entities, communicating via an API rather than bleeding the two together as in the long run it creates headaches.