child component is not re-rendered when prop is updated from parent AND no default slot is provided

[lzhoucs]

Version

3.0.0-beta.14

Reproduction link

https://codepen.io/lzhoucs/pen/GRpwwwK

Steps to reproduce

• Go to: https://codepen.io/lzhoucs/pen/GRpwwwK
• Click on one of the two tabs

What is expected?

The tab clicked should render its active prop as true

What is actually happening?

The tab renders its initial active prop value false and never re-renders after being clicked

---

The code is in the demo is from the last state of #1186 with slight variation. To summarize:

• When default slot is not provided, it is not working: https://codepen.io/lzhoucs/pen/GRpwwwK
• When default slot is provided, it is working: https://codepen.io/lzhoucs/pen/PoPxxyw

The only difference between the two demos above is the default slot. e.g:

    <tab href="#tab1"></tab>

vs

    <tab href="#tab1">foo</tab>

[LinusBorg]

This is expected from your code.

You create the vnodes variable once, in setup. if there's no default slot, it's initialized to an empty array.

So the children component that you create loops over an empty array and therefore can never collect any reactive dependencies - hence, it never re-renders.

Solution: move that line into the children component's render function and it works as expected:

setup(props, {slots, emit}) {
    
    return {
      children: () => {
        const vnodes = slots.default ? slots.default() : []
        vnodes.forEach((vnode) => {

[lzhoucs]

@LinusBorg thanks for the comment. If you take a look at #1186, I moved it out of the children function as a workaround. That's why I said

The code is in the demo is from the last state of #1186

My question then becomes is there a way to get both #1186 and this ticket to work? If not could you please reopen this ticket in case there's a fix for it?

[LinusBorg]

If not could you please reopen this ticket in case there's a fix for it?

There is no fix for this in the context of this bug report, so I won't re-open. By moving the line into setup and out of the children, you created something that cannot be reactive when there's no default slot. There's not really anything we can do here save from changing the whole way components and reactivity works.

I'd rather suggest you join us on the forum or the chat and formulate clear description of the challenge you are intending to solve parsing vnodes like that.

I for one usually refrain from that as it doesn't scale well and instead use provide/inject to communicate state between composite components like that.