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({
    data(){return{
        name: 'John Doe',
        counter: 0,
    }},

    methods: {
        addCounter() {
            this.counter++;
        }
    },

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

// 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.