[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"topic-props":3,"$f2v3tzw7dti6zg":-1,"articles-feed-\u002Ftopics\u002Fprops-{\"page\":1,\"sort\":\"newest\",\"tagSlug\":\"props\"}":9},{"articleCount":4,"color":5,"id":6,"indexable":7,"name":8,"slug":8},1,"#10b981","01a17739-ba77-7077-9506-28a09ab3b3b4",false,"props",{"items":10,"page":4,"pageSize":41,"totalCount":4},[11],{"content":12,"createdAt":13,"id":14,"image":15,"isAffiliate":7,"isPublished":16,"publishedAt":17,"slug":18,"sourceId":19,"sourceName":20,"sourceType":21,"summary":22,"title":23,"updatedAt":24,"url":25,"urlHash":26,"tags":27},"Hey folks! Today, I would like to share with you a problem I encountered recently in my project and how I overcome it. I will get to the point to explain the problem quicky, what are the possible solutions to solve and what we decided to go with and why - without unnecessary content polution but certain Intelligence ;) Let me know your thoughts! Disclaimer I wasn't writing for some time as I needed to rethink what I want to share with you and in what form. Basically, all my recent posts\u002Farticles were somehow AI created - either fully or highly assisted. And honestly, I don't feel ok with that. I believe what made you stay with my blog is the feeling that the author is authentic - that the problems I am solving are real and based on the everyday work with the framework I love - Vue. So, I am changing a form. I will publish hand written (obviously not perfect) articles that will cover problems or real life case studies I have encountered a week before - no more AI generated content I promise ;) What I believe made you stay with my blog is authenticity - I was writing about problems I was encountering everyday as I was not able to find an answer for it. This form I would like to continue - and I hope you will like it! :) Problem One of the developers came back to me recently saying: I have created a new feature package\u002Fmodule for our project (that is independent from other domains) and I encountered this problem while following the previously agreed approach: Destructuring the `props` will cause the value to lose reactivity. The code was looking more or less like following: <script setup lang=\"ts\"> const props = defineProps<{ apiClient: Client }>() const result = getProduct(apiClient, key) \u002F\u002F Destructuring the `props` will cause the value to lose reactivity. <\u002Fscript> And he then asked: What should I do? Solutions We have considered three available solutions: Use the toValue helper from Vue - this was good as temporary solution to hide the eslint error but we didn't want to go with this approach as our final option The second option was to wrap the prop inside a computed property or watcher like: watch(() => props.apiClient, () => { console.log(props.apiClient) }) But we didn't like this solution either as we basically were assuming that the apiClient can change - while in our case the apiClient is a static dependency. Pass the apiClient via provide\u002Finject instead. This pattern can be used to provide both reactive and static values to your app. Selected approach We have selected the third option as it looked the best from the architectural point of view. We have a static apiClient that we want to provide to all consumers in our app that can inject them just in the moment they need it. This also helps with the concept of prop drilling as we don't need to pass the prop in a nested tree. But it also comes with some drawbacks such as less visible interface of individual packages externally that we wanted to achieve in the first place. You have a better approach? Something I missed? Share it in the comments! :)","2026-10-26T08:00:21.717Z","01a17739-88d3-70e4-940f-27b319049476","https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=1200,height=627,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0wqnnm50zwbr0yhceksg.png",true,"2026-10-26T07:28:25.000Z","what-is-props-reactivity-loss-in-vue-and-how-to-avoid-it","019d6bd6-7fe0-7244-80dc-9a4e8751886a","Jakub Andrzejewski","rss","The article discusses the issue of props reactivity loss in Vue when destructuring props and presents three potential solutions. The author ultimately recommends using the provide\u002Finject pattern to maintain reactivity while avoiding prop drilling, emphasizing the importance of architectural considerations in Vue applications.","What is props reactivity loss in Vue and how to avoid it?","2026-10-26T08:00:34.390Z","https:\u002F\u002Fdev.to\u002Fjacobandrewsky\u002Fwhat-is-props-reactivity-loss-in-vue-and-how-to-avoid-it-52dl","8a1faeecb63513eca80013b1312dd8ef46abc225960610bd1e24f7263aacd804",[28,31,34,37,40],{"color":5,"id":29,"name":30,"slug":30},"019d6bd8-c9a8-7783-bd22-03145b355427","vue",{"color":5,"id":32,"name":33,"slug":33},"019d6bd8-ca21-71c5-a236-37d94fe57d24","composition-api",{"color":5,"id":35,"name":36,"slug":36},"019d9cf0-ca04-75bb-ad86-ce8da1c0be23","architecture",{"color":5,"id":38,"name":39,"slug":39},"019daac3-2f85-7393-b891-9da3891267ca","reactivity",{"color":5,"id":6,"name":8,"slug":8},20]