👀 Views: 0 💬 Answers: 1 📅 Created: 2025-07-07

vue.js v-for dynamic-components JavaScript

I'm getting frustrated with I'm performance testing and I've looked through the documentation and I'm still confused about After trying multiple solutions online, I still can't figure this out... I'm working with an scenario with rendering a list of dynamic components using `v-for` in Vue 3. I have a parent component that dynamically renders a list of child components based on an array of objects. Each object has a unique `id` that I'm trying to use as the key in the `v-for` directive, but I'm working with unexpected behavior where the child components do not seem to re-render correctly when the list is updated. My code looks like this: ```vue <template> <div> <button @click="addComponent">Add Component</button> <div v-for="component in components" :key="component.id"> <DynamicComponent :is="component.type" :data="component.data" /> </div> </div> </template> <script> import DynamicComponent from './DynamicComponent.vue'; export default { components: { DynamicComponent }, data() { return { components: [] }; }, methods: { addComponent() { const newComponent = { id: Date.now(), type: 'SomeComponent', data: { /* some data */ } }; this.components.push(newComponent); } } }; </script> ``` When I click the 'Add Component' button, a new component is added to the list, but sometimes the previous components lose their state or do not update as expected. I'm also seeing warnings in the console like "Duplicate keys found: [object Object]". I've verified that each `id` is unique by logging it when adding components. I tried using `this.$forceUpdate()` after pushing to the array, but that didn't resolve the scenario. Has anyone experienced similar problems or have insights into how to correctly utilize `v-for` with dynamic components in Vue 3? Any help would be greatly appreciated! I'm working on a CLI tool that needs to handle this. For context: I'm using Javascript on Linux. I'm working with Javascript in a Docker container on macOS. Has anyone dealt with something similar?