Modify a vue instance

Hello,
This is my current (stripped out) code:

var vueApp = Vue.createApp({
		data() {
			return {
				list: null,
				componentKey: 0
			}
		},
		updated() {
			console.log('updated');
		}
	});
// Here I have my component
vueApp = vueApp.mount('#appVue');

Now I would like to modify the data function after is creation.
Something like this:
vueApp.$data = data(){ return{listB:null}};

The best solution for me should be adding some others members to the data return object but, since data is a function, I fear I would like to rewrite it with the new members.
Anyway the problem is catching data because the vueApp object doens’t expose it at all.

The reason for doing this thing is that I want to split the initialization and the mounting in two different physical file.
The initialization (createApp) will be located in a sort of master page, while the mounting has to be put in a child page that before mounting has to create the components and the data source it needs.

It seems strange to me not having found anything about this topic but vue is suitable for any scenario, even for a multi page web site and not only for a SPA so, I’m here to ask.

Thank you.

Do NOT do this. You will break Vue.

What you want is an MPA (see this thread), it requires a different approach because you will have a new Vue instance each time the page reloads.