Vue 3 defineComponent Slot Not Reacting to Updates in Slot Scope Variable

[heggria]

Title: Vue 3 defineComponent Slot Not Reacting to Updates in Slot Scope Variable

Description:

version: 3.3.4
I am encountering an issue with Vue 3's defineComponent where the slot does not behave as expected when passing scope variables and updating them in the parent component. Specifically, I have a component named CardList that accepts a prop named list. In father.vue, I am passing displayData through a slot named container and binding it to the list prop of CardList. However, when displayData gets updated, the CardList component does not re-render as anticipated.

In CardList.tsx, I attempted to make list reactive by wrapping props.list in a ref, but console.log(list) does not output the new value when list gets updated. Furthermore, the render function of CardList is not being called again despite the change in the value of the list prop.

Code:

father.vue

<template #container="{ displayData }: { displayData: TableListDisplay<SessionItem>[] }">
  {{ displayData }}  <!-- working fine -->
  <CardList :list="displayData">
  </CardList>
</template>

CardList.tsx

import { Events, SetupContext, SlotsType, defineComponent, ref } from 'vue';
import styles from './test.module.css';
import { Stack } from '../Stack';
import { Group } from '../Group';

interface PropsType<T extends Record<string, any> = Record<string, any>> {
    list?: T[];
}

interface S<T extends Record<string, any> = Record<string, any>> {
    default?: (props: { row: T; index: number }) => JSX.Element;
}

export const CardList = defineComponent(
    <T extends Record<string, any>>(props: PropsType<T>, context: SetupContext<Events, SlotsType<S<T>>>) => {
        const { slots } = context;
        const { list } = props;

        console.log(list); // don‘t work when list update

        return () => (
            <Stack class={styles['card-list']} gap={12}>
                {list?.map((row, index) => (
                    <Group class={styles['card-list-item']} key={row?.id || index} grow>
                        {slots.default?.({ row, index })}
                    </Group>
                ))}
            </Stack>
        );
    },
    {
        // eslint-disable-next-line vue/require-prop-types
        props: ['list']
    }
);

I am seeking to resolve the issue where the CardList component does not re-render when the list prop gets updated. Any advice and guidance on how to address this issue would be highly valuable.

[heggria]

Ok I find the problem. const { list } = props; will lost reactive for list.