1---
2title: Provide/Inject Values Are Not Reactive by Default
3impact: HIGH
4impactDescription: Provided primitive values lose reactivity, causing injecting components to not update when the source value changes
5type: gotcha
6tags: [vue3, provide-inject, reactivity, composition-api, options-api]
7---
8 
9# Provide/Inject Values Are Not Reactive by Default
10 
11**Impact: HIGH** - A common misconception is that provide/inject automatically maintains reactivity. By default, provided primitive values are NOT reactive. If the provided value changes in the provider, injecting components will NOT be updated.
12 
13## Task Checklist
14 
15- [ ] Always wrap primitive values in `ref()` before providing
16- [ ] Use `computed()` in Options API `provide()` for reactive data
17- [ ] Never destructure refs when providing - pass the ref directly
18- [ ] Understand that provided refs are NOT auto-unwrapped in injectors
19 
20## The Gotcha: Primitives Lose Reactivity
21 
22**Wrong - Primitive loses reactivity:**
23```vue
24<!-- Provider.vue -->
25<script setup>
26import { ref, provide } from 'vue'
27 
28const count = ref(0)
29 
30// WRONG: Providing the unwrapped value loses reactivity
31provide('count', count.value) // Provides 0, not a reactive value
32 
33function increment() {
34  count.value++ // Injector will NOT see this change
35}
36</script>
37```
38 
39```vue
40<!-- Injector.vue -->
41<script setup>
42import { inject } from 'vue'
43 
44const count = inject('count') // Gets 0, forever static
45</script>
46 
47<template>
48  <!-- This will always show 0 -->
49  <div>Count: {{ count }}</div>
50</template>
51```
52 
53**Correct - Provide the ref itself:**
54```vue
55<!-- Provider.vue -->
56<script setup>
57import { ref, provide } from 'vue'
58 
59const count = ref(0)
60 
61// CORRECT: Provide the ref, not the value
62provide('count', count)
63 
64function increment() {
65  count.value++ // Injector WILL see this change
66}
67</script>
68```
69 
70```vue
71<!-- Injector.vue -->
72<script setup>
73import { inject } from 'vue'
74 
75// The ref is injected as-is, maintaining reactivity
76const count = inject('count')
77</script>
78 
79<template>
80  <!-- Access .value in script, auto-unwrapped in template -->
81  <div>Count: {{ count }}</div>
82</template>
83```
84 
85## Options API: Use computed() for Reactivity
86 
87In Options API, the `provide` option with plain properties is NOT reactive:
88 
89**Wrong - Options API without computed:**
90```js
91export default {
92  data() {
93    return {
94      message: 'Hello'
95    }
96  },
97  // WRONG: This is NOT reactive
98  provide() {
99    return {
100      message: this.message // Provides 'Hello' as a static string
101    }
102  }
103}
104```
105 
106**Correct - Use computed() in Options API:**
107```js
108import { computed } from 'vue'
109 
110export default {
111  data() {
112    return {
113      message: 'Hello'
114    }
115  },
116  provide() {
117    return {
118      // CORRECT: Wrap in computed for reactivity
119      message: computed(() => this.message)
120    }
121  }
122}
123```
124 
125## Understanding Ref Behavior in Inject
126 
127When you provide a ref, it is injected as-is and NOT auto-unwrapped:
128 
129```vue
130<!-- Provider.vue -->
131<script setup>
132import { ref, provide } from 'vue'
133 
134const user = ref({ name: 'John' })
135provide('user', user)
136</script>
137```
138 
139```vue
140<!-- Injector.vue -->
141<script setup>
142import { inject } from 'vue'
143 
144const user = inject('user')
145 
146// In script, access with .value
147console.log(user.value.name) // 'John'
148 
149function updateName(newName) {
150  user.value.name = newName // Works, but mutations should be in provider
151}
152</script>
153 
154<template>
155  <!-- In template, auto-unwrapped at top level -->
156  <div>{{ user.name }}</div>
157</template>
158```
159 
160## Providing Reactive Objects
161 
162Reactive objects (created with `reactive()`) maintain reactivity when provided:
163 
164```vue
165<!-- Provider.vue -->
166<script setup>
167import { reactive, provide } from 'vue'
168 
169const state = reactive({
170  count: 0,
171  message: 'Hello'
172})
173 
174provide('state', state)
175</script>
176```
177 
178```vue
179<!-- Injector.vue -->
180<script setup>
181import { inject } from 'vue'
182 
183const state = inject('state')
184// state.count and state.message are reactive
185</script>
186```
187 
188## Common Mistake: Destructuring Breaks Reactivity
189 
190**Wrong - Destructuring provided reactive state:**
191```vue
192<script setup>
193import { inject } from 'vue'
194 
195// WRONG: Destructuring loses reactivity
196const { count, message } = inject('state')
197// count and message are now static values
198</script>
199```
200 
201**Correct - Keep the reference intact:**
202```vue
203<script setup>
204import { inject, toRefs } from 'vue'
205 
206const state = inject('state')
207// Use state.count and state.message directly
208 
209// Or use toRefs if you need destructured reactive refs
210const { count, message } = toRefs(state)
211</script>
212```
213 
214## Debugging Tip
215 
216If your injected value isn't updating:
217 
2181. Check if you provided `ref.value` instead of `ref`
2192. Check if you destructured a reactive object
2203. In Options API, ensure you used `computed()`
2214. Use Vue DevTools to inspect the provided values
222 
223## Reference
224- [Vue.js Provide/Inject - Working with Reactivity](https://vuejs.org/guide/components/provide-inject.html#working-with-reactivity)
225- [How to make provide/inject reactive - LogRocket Blog](https://blog.logrocket.com/how-to-make-provide-inject-reactive/)
226- [GitHub Issue: Inject/Provide is not reactive](https://github.com/vuejs/vue/issues/7017)
227