Version

3.0.9

Reproduction link

https://codepen.io/gkandemir/pen/poRbOBX

Steps to reproduce

provide / inject

If you are using CLI,

• Create 2 more components except App.vue
• You can named them whatever you want I will put them as componentA.vue and componentB.vue
• App.vue is the main component has all datas to provide into all children

App.vue component has componentA as child. Also componentA has componentB as child so here is structure.

App.vue
..componentA.vue
....componentB.vue

App.vue Template

<template>
  <componentA />
</template>

App.vue data

  data() {
    return {
      title: "Comment Like/Dislike App",
      social_media: "gokhan@gkandemir.com",
      commentList: [{ id: 1, comment: "This comment is really rush..", like: 0, dislike: 0 }],
      filterKey: ""
    };
  },

App.vue provide

provide() {
    return {
      commentList: this.commentList
    };
  },

We are injecting commentList data which is provided by App.vue in componentB.vue which is in componentA.vue

componentB.vue Component

<template>
  <pre>
    {{ commentList }}
  </pre>
</template>
<script>

export default {
  inject: ["commentList"],
};
</script>

Lets say we sent a HTTP Request to somewhere and we got some response, If we push new item(s) to commentList array in App.vue like that;

  created() {
    setTimeout(() => {
      this.commentList.push({ id: 2, comment: "Bu 2.comment cok iyi olmuş", like: 0, dislike: 0 })
    }, 1000);
  },

everything works fine. We can get updated version of commentList in componentB

Until when I put new data to commentList data property instead of pushing item to array in App.vue.

For Example;

  created() {
    setTimeout(() => {
      this.commentList = [
        ...this.commentList,
        { id: 2, comment: "Bu 2.comment cok iyi olmuş", like: 0, dislike: 0 },
        { id: 3, comment: "Bu 3.comment cok berbat olmuş", like: 0, dislike: 0 },
        { id: 4, comment: "Bu 4.comment cok iğrenç olmuş", like: 0, dislike: 0 },
        { id: 5, comment: "Bu 5.comment hayatimda daha kötüsünü görmedim birak bu işi!!", like: 0, dislike: 0 }
      ];
    }, 1000);
  },

we can't get updated from commentList anymore.

BTW, I haven't test it in Composition API.

What is expected?

In both cases, sending updated data with provide

What is actually happening?

We can get updated value provided parent component, when I push item into array.

We can't get updated value provided parent component, when I array assignment with new value

This is expected, if you want to inject the reactive version, you need to wrap the commentList with another object, see https://codepen.io/hcysunyang/pen/yLgJGJQ

This is expected, if you want to inject the reactive version, you need to wrap the commentList with another object, see https://codepen.io/hcysunyang/pen/yLgJGJQ

Really thanks :) I guess missed the some point at somewhere :)