Unable to use Root Reactive Props + expose

[rockisch]

Root Reactive Props

Consider a component like this:

const App = {
  props: { check: Number },
  setup(props, { expose }) {
    watch(
      () => props.check,
      () => console.log("prop changed"),
    });
    expose({
      func: () => console.log("expose called")
    });
  },
}

Currently, the only way to have reactive props in a 'root' component is to use a functional component:

const props = reactive({ check: 1 });
const app = createApp(() => h(App, props));
app.mount("#app");

props.check += 1;  // Will trigger watch

This is kinda annoying, but I can live with it.

Root Reactive Props + expose

However, an issue arises if you want to use exposed variables from your component: .mount() currently does not return an instance when instantiating functional components. Since that's how you get access to exposed variables, you can't access them in a conventional manner:

const props = reactive({ check: 1 });
const app = createApp(() => h(App, props));
const instance = app.mount("#app");

props.check += 1;
instance.func();  // error: instance is null for functional components

There are some ways to circumvent this issue, but they're all kinda hackish:

// Approach 1: Use funcional component and access through 'app1._instance.subTree.component.exposed'
const props = reactive({ check: 1 })
const app = createApp(() => h(App, props));
app.mount("#app");

props.check += 1;
app._instance.subTree.component.exposed.func();


// Approach 2: Use the more common creation method, and access props through 'app._instance.props'
const app = createApp(App, { check: 1 });
const instance = app.mount("#app");

app._instance.props.check += 1;
instance.func();

Solution

IMO, there are 2 ways to solve this issue:

• Make it so createApp accepts reactive objects as its second argument
• Return instances from .mount() even when the component is a functional component

Ideally both would get implemented, but as long as either of them get solved this use case will get a lot better.

I'm not 100% sure if those would be considered bugs of feature requests, so I'm opening this discussion to gather some feedback.