I want to generate an component for dropdown display. I wanted to use slot for display the content at the higher level.

I implemented a following structure. I can display component and manage events. But props changes at "componentA" not trigger watch event on ChildComponent which displays at "Dropdown Manager Component". When i debug "Dropdown Manager Component", it still contains old props of slot. It still uses first id value. I needed to recall showPopup func.

Did you have any recommendation or link that i can follow to fix the issue. I try to use watch slot changes but not trigger when id changed at "ChildComponent".

Thanks,

const slots = useSlots();

watch(()=>slots,()=>{
  // call function
})

Example componentA in app

<template>
...
    <Dropdown :options="tmpoptions">
        <template v-for="tmpoption in tmpoptions" :key="tmpoption.key" v-slot:[tmpoption._id]>
            <ChildComponent :id="id"></ChildComponent>
        </template>
    </Dropdown>
...
<template/>
<script>
const props = defineProps({
  id: {type: String}
})
</script>

Dropdown Component:

<template>
  <button @click="showPopup">
    Click
  </button>
</template>

<script>
const slots = useSlots();
const props = defineProps({
  options: {type: Array<any>}
})

showPopup(){
  mainStore.updateStateItem({
    options: props.options.map(x=>{
      return {...x, slot: slots[x._id]};
    })
  });
}
</script>

Dropdown Manager Component:

<template>
  <div v-for="displayItem in displayItems">
    <component v-if="displayItem.slot" :is="displayItem.slot"></component>
    <span v-else>{{displayItem.key}}</span>
  </div>
</template>

<script>
const displayItems= ref();

watch(() => mainStore.stateItem,(val) => {
    updateItems();
});
  
updateItems(){
  displayItems.value=mainStore.stateItem;
}
</script>

Top Level:

<App>
  <OtherComp/>
  <DropdownManager/>
</App>