How can I update properties of a Vue component from outside?

[webJose]

Hello! I'm creating a micro-frontends library, and I would like to know if I can update properties of a Vue component that I create using createApp() and mount with .mount(). The updated set of properties would come from outside the Vue project.

This is what I have used for experimenting, but doesn't work:

import { ref, reactive, createApp, triggerRef } from 'vue'

const msg = ref('Hi!');
const r = reactive({ msg });

const app = createApp(App, r);
const mounted = app.mount('#app');
console.log('Props: ', mounted.$props);
setTimeout(() => {
    console.log('msg: ', msg.value);
    msg.value = 'Hello!';
    // triggerRef(msg);
    console.log('msg: ', msg.value);
  console.log('Props: ', mounted.$props);
  // mounted.$forceUpdate();
}, 4000);

The idea here would be to create generic code that receives the component and the list of initial properties as arguments, then mount the component, and then wait for any requested changes in the properties, but the user interface is not changing. I must note, however, that the updated msg does show up in the r value, and I can see the change in msg when I do the change through r, but the problem is that the rendered component doesn't update the user interface.

Does anybody know how I can set this up?

[webJose]

Ok, I may have found the answer:

import { reactive, createApp, h } from 'vue'
import App from './App.vue'

const r = reactive({ msg: 'hi' });

const app = createApp({
    render: () => h(App, r)
});
const mounted = app.mount('#app');
console.log('Props: ', mounted.$props);
setTimeout(() => {
    console.log('msg: ', r.msg);
    r.msg = 'Hello!';
    console.log('msg: ', r.msg);
}, 4000);

This works. If anyone knows of a better way to do this, I'll be most grateful. I'll be also grateful for any links to information about the subject. I did read Reactivity in Depth in the docs, but it doesn't show you how to set things up from "outside".

[ryanportfolio]

I think this is the right approach

The wrapper works because the read happens inside a render function, so r gets tracked and changing msg re-renders.

One gotcha tho app.mount() returns the wrapper's instance, not App's, which is why mounted.$props is empty. Add a ref if you need the real one:

const inner = ref()
const app = createApp({ render: () => h(App, { ...r, ref: inner }) })

For micro-frontends I'd use defineCustomElement instead. Declared props become real DOM properties that re-render on assignment, so the host needs no Vue import:

import { defineCustomElement } from 'vue'
import App from './App.ce.vue'

customElements.define('my-widget', defineCustomElement(App))
document.querySelector('my-widget').msg = 'Hello!' // re-renders

I'd name the file .ce.vue (or set customElement: true on the build plugin) or the styles won't reach the shadow root
https://vuejs.org/guide/extras/web-components.html

[webJose]

Thanks for the reassurance and extra information! I'll call the matter settled, then.