Component $attrs and $listeners are readonly in counter-vuex-spec

[amirrustam]

This issue is part of effort to fix cypress-io#6, and get Vuex fully operational in component unit tests.

Exhibited Behavior

When clicking on an increment button within the counter-vuex-spec run, Vue displays a warning message stating the $attrs and $listeners properties of the Counter component are readonly.

Analysis

The increment mutation will trigger updating of the child components, in this case the child component is Counter. This updating is done via the aptly named updateChildComponent() function within vue/src/core/instance/lifecycle.js.

updateChildComponent() sets the global flag isUpdatingChildComponent to true before the update, and to false after update.

This global flag is checked during rendering time within initRender() to define the reactive properties $attrs and $listeners:

// vue/src/core/instance/render.js

defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
  !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
}, true)
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {
  !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
}, true)

The issue is caused by the global isUpdatingChildComponent flag being set to false before the rendering is initialized.

Context

"cypress": "1.4.1",
"vue": "2.5.13",
"vue-loader": "13.6.1",
"vue-template-compiler": "2.5.13",
"vuex": "3.0.1"