Component doesn't change because reactive data doesn't update

[rob-digital]

What problem does this feature solve?

Hi folks.
I came across an issue in which a component is depending on the reactive data but it doesn't change because the reactive data is not refreshing. I have a navigation drawer which should highlight an active element depending on scroll to this element. The reactive data doesn't want to update and also the active item doesn't change. It's seems to work only when I click the component in the vue-devtool panel. Any ideas why is that? Is it going to work in the production mode?

Specifically, the "model" data property doesn't change unless I click the component name in the dev tools panel.

Thanks for the interest

What does the proposed API look like?

data: () => ({
     drawer: null,
     model: {
       type: Number,
       require: false
     },


computed: {

if (this.currentScroll >= this.currentPositions[0].top ) {
              for(let i = 0; i < this.currentPositions.length; i  ) {

               if (this.currentScroll >= this.currentPositions[i].top && this.currentScroll <= this.currentPositions[i].bottom) {
                 return   this.model = i
                 }
           }
       } else {
          return this.model = -1
       }
   },
}```

<!-- generated by vue-issues. DO NOT REMOVE -->

[rob-digital]

It was created by the issue helper...

[AtofStryker]

I am also running into this. Looks like reactivity breaks sometimes when vue dev tools is turned on. If I close the console and refresh the browser it fixes the issue

[Akryum]

It was created by the issue helper...

Please use the bug reporting part of the issue helper: