Refactor Vue components to SFC

[jeriox]

We are currently using Vue components that are built in the browser. This does not allow to re-use custom components in other Vue compontents. Also, JS and HTML are separated in this approach, while SCF keeps all aspects of the component in one file.

We should consider refactoring our components to SCF components.

This bears the question as how to render those. The "traditional" approach would include a build step. We tried copying that over from pretix (which uses https://github.com/codingcatgirl/django-vue-rollup), but the used components (vue-template-compiler, rollup-plugin-vue) are not maintained anymore or do not work with Vue3. It should be possible to recreate such a solution with Vite, but it is not straightforward. An advantage of this approach is that we could shift our JS dependency management to npm as this is required for such a step anyways.

Another approach would be using a tool like https://github.com/FranckFreiburger/vue3-sfc-loader