Vue server-side rendering - no way of hydrating?

I am working on a project in which I have a pre-existing TypeScript Node application.I am currently trying to add Vue support for server-side rendering.

To note I have got it to server side render, which is great, and it sends it to the browser as a HTML string, the problem I have, is there is no way of making Vue hydrate on the client side.

// Create a new Vue instance.
const instance = new Vue({
        name: 'John Doe',
        counter: 0,

    methods: {
        addCounter() {

    template: `
            <p>Hello {{ name }}.</p>
            <button @click="addCounter">{{ counter }}</button>

// Render the result and return as string.
const result: string = await this.renderer.renderToString(instance, {
    title: 'Testing | DCR',
    meta: '',

return result;

The return goes directly back to the client, the issue I see here, is there is no re-hydration functionality?

I do not wish to use the bundle renderer, because one it seems to introduce way too much complexity, and I do not wish to create another folder with the Vue application in and just serve it statically.

Is there something I am doing wrong? It says once it’s on the page, I should be able to do app.$mount(); but app does not exist, I am assume something is missing, but honestly no clue what that might be?

Thanks in advance.