How to use some Vue components in server-side-rendered page

I would like to slowly transform parts of my existing server-side-rendered website into vue components. The way it is done on this livestream (https://www.youtube.com/watch?v=qVueTeO4yMs&t=960s).

So, there is one wrapping <div id="app"> that surrounds all the normal ssr html. On some pages, there are <custom-element> vue components, that should be rendered in place.

This is what I have atm:

<body>
    <div id="app">
        <h1>SSR content</h1>
        This should stay
        <testing-component></testing-component> <-- render the component here
    </div>
</body>

import { createApp } from 'vue'
import TestingComponent from './components/TestingComponent.vue';


const app = createApp({
    el: '#app'
});

app.component('testing-component', TestingComponent);

But this isn't rendering anything.

Adding app.mount("#app"); overwrites everything within my <div id="app">.

So, how to mount the component, without replacing everything in my <div id="app">?

UPDATE

Forgot to mention I was using Vite. And with updating some settings in the vite config file I could make it work:

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js', // This was needed.
    },
  },
})

Entrypoint vue:

import { createApp } from 'vue'
import TestingComponent from './components/TestingComponent.vue';


const app = createApp({
}).mount("#app");

app.component('testing-component', TestingComponent);

This will increase the build file, so I was told.