makeFindMixin uses the same object instance for data

[kornalius]

Steps to reproduce

This is a though one to explain, however I found the solution. I spent a few days on this one.

1. Create 2 components that are called recursively within each other, where one of them use a makeFindMixin.
2. Put a watcher on the is{name}FindPending data and console.log the newValue and the this._uid of the component instance.

mixins: [
  makeFindMixin({ service: 'documents', name: 'documents' })
],

watch: {
  isDocumentsFindPending (newValue) {
    console.log(newValue, this._uid)
  }
}

It will always log on the first component instance instead of on the proper instance the makeFindMixin is being used.

Solution

When you define the data function, you reuse the same data const in all instances of the makeFindMixin. By recreating a new object from the data const, all is good.

data () {
  return { ...data }
}

An object.assign should do the job here too.

Expected behavior

The is{name}FindPending (or all props of the data object) should be changed only on the instance of the component where the mixin is defined.

Actual behavior

The is{name}FindPending data is reused on all component instances instead of having one data instance object per component instance. In other words, the dynamic data props are reused by all component instances that use the makeFindMixin mixin.

[J3m5]

Good point!

[marshallswain]

Good catch! @kornalius it's funny to me that I never noticed this. I guess I didn't spend much time with the mixins before switching to the composition api. This is definitely a bug and should be an easy fix.