Vue 3: implementing v-for and async component loading causing duplicate rendering
I need help solving I've been researching this but I'm maintaining legacy code that I'm experiencing a question with loading async components in a `v-for` loop in my Vue 3 application. The components are duplicating their rendering when the data changes, and I need to seem to pin down the cause. I'm fetching data from an API and rendering a list of articles with the following code: ```vue <template> <div> <Article v-for="article in articles" :key="article.id" :article="article" /> </div> </template> <script> import Article from './Article.vue'; export default { components: { Article, }, data() { return { articles: [], }; }, async mounted() { const response = await fetch('https://api.example.com/articles'); this.articles = await response.json(); }, }; </script> ``` I verified that the API response is returning the correct articles without duplicates, but when the response updates, the components sometimes render twice for the same article. I've tried setting a unique `:key` for each `v-for`, as shown, but I'm still seeing issues. I also attempted to use `this.$set(this.articles, index, newArticle)` to ensure reactivity, but the question continues. Additionally, I have the Vue devtools open and can see that the `articles` array is indeed updating without duplication in the console. Could this be an scenario with how Vue is handling the async component lifecycle? I'm using Vue 3.2.0 and have also included the `vue-router` in my project. Any insights on how to resolve this would be greatly appreciated! I'm working on a desktop app that needs to handle this. I'm developing on CentOS with Javascript. Thanks for your help in advance! This issue appeared after updating to Javascript 3.9. Any ideas what could be causing this?