WIP: Vue 3 migration

[EltonGohJH]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

Overview of changes:
Related to #2084
There are still a lot of vue warning for components. I have attempted to refactor some components to vue 3.
I think that there may be no need to refactor some of the component (or at least no urgency if it is working).
The main logic changed would be the SSR part and instead of passing pageVueRenderFn to browser including the script, we now pass content (the html code) to the client side so that client can hydrate.

Anything you'd like to highlight/discuss:
It seems kinda redundant to pass (the html code) to the client side for client to hydrate. So, I was thinking can we do with no hydration.
It seems that there are some parts that are preventing us from going full SSR with client side hydration.
Some functions are called during mounting in client side. I wonder whether it is possible to shift this logic to server side.
Do we want to handle this in this issue?

Testing instructions:
Unfortunately, some components are preventing us from testing out serving of docs.
Default template generated by markbind can be tested albeit with a lot of vue warnings.

Proposed commit message: (wrap lines at 72 characters)

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

[lhw-1]

@EltonGohJH Thanks for the initiative & the PR! It will be great to finally move over to Vue 3.

Would it be possible to have some examples (or if possible, a full list) of the Vue 3 warnings so that we know what are the things that we'll need to address? I think that ideally we would want to fix the warnings within this PR (since they are directly caused by the Vue 3 migration itself), but if it really is too much work for a single PR, as suggested we can open new issues accordingly and tackle them as we go along.

If possible, it would also be great to have a "step-by-step" list of things to be done / things done so far so that we can get a gauge of the progress, similar to #1913 👍

[EltonGohJH]

@EltonGohJH Thanks for the initiative & the PR! It will be great to finally move over to Vue 3.

Would it be possible to have some examples (or if possible, a full list) of the Vue 3 warnings so that we know what are the things that we'll need to address? I think that ideally we would want to fix the warnings within this PR (since they are directly caused by the Vue 3 migration itself), but if it really is too much work for a single PR, as suggested we can open new issues accordingly and tackle them as we go along.

If possible, it would also be great to have a "step-by-step" list of things to be done / things done so far so that we can get a gauge of the progress, similar to #1913 👍

@lhw-1
There are too many warnings to list and tbh I have no idea how to fix some as of yet.
I will update the step-by-step list soon after I make sure everything is on track and we are ready to proceed.

[EltonGohJH]

I am closing off this PR as I am rethinking the approach.

Right now, markbind SSR is very complicated with a lot of undocumented non-trivial approaches to enable SSR.
I think that the effort to migrate everything in one go and ensure that there will be no critical bugs would be immense.

So, I think that a more appropriate measure would be that we make it such that we can use both concurrently.
(eg. allow vue3 components to be used without affecting the current vue2 setup) which would allow us to

1. Create new components in Vue 3.
2. Slowly and carefully migrate component from Vue 2 and Vue 3 (if needed).

This approach would be better but I would need investigate the feasibility of having two systems together.