Vue-Selecto $attrs is readonly error

[JonathanTreffler]

Description

Every time vue-selecto selects an object these errors get thrown:

vue.runtime.esm.js?2b71:619 [Vue warn]: $attrs is readonly.

found in

---> <Selecto> <Page> at core/src/components/page/Page.vue <PageContainer> at core/src/components/page/PageContainer.vue <FractavaNotes> at core/src/components/FractavaNotes.vue <DevServer> at src/App.vue <Root> warn @ vue.runtime.esm.js?2b71:619 eval @ vue.runtime.esm.js?2b71:3503 reactiveSetter @ vue.runtime.esm.js?2b71:1045 updateChildComponent @ vue.runtime.esm.js?2b0e:4152 prepatch @ vue.runtime.esm.js?2b0e:3144 patchVnode @ vue.runtime.esm.js?2b0e:6352 updateChildren @ vue.runtime.esm.js?2b0e:6237 patchVnode @ vue.runtime.esm.js?2b0e:6363 patch @ vue.runtime.esm.js?2b0e:6526 Vue._update @ vue.runtime.esm.js?2b0e:3963 updateComponent @ vue.runtime.esm.js?2b0e:4081 get @ vue.runtime.esm.js?2b0e:4495 run @ vue.runtime.esm.js?2b0e:4570 flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326 eval @ vue.runtime.esm.js?2b0e:1989 flushCallbacks @ vue.runtime.esm.js?2b0e:1915 Promise.then (async) timerFunc @ vue.runtime.esm.js?2b0e:1942 nextTick @ vue.runtime.esm.js?2b0e:1999 queueWatcher @ vue.runtime.esm.js?2b0e:4418 update @ vue.runtime.esm.js?2b0e:4560 notify @ vue.runtime.esm.js?2b0e:730 reactiveSetter @ vue.runtime.esm.js?2b0e:1055 proxySetter @ vue.runtime.esm.js?2b0e:4644 onSelect @ Page.vue?4e63:123 invokeWithErrorHandling @ vue.runtime.esm.js?2b71:1854 invoker @ vue.runtime.esm.js?2b71:2179 invokeWithErrorHandling @ vue.runtime.esm.js?2b71:1854 Vue.$emit @ vue.runtime.esm.js?2b71:3888 eval @ selecto.esm.js?95c4:115 eval @ event-emitter.esm.js?0c79:211 __proto.emit @ event-emitter.esm.js?0c79:210 __proto.trigger @ event-emitter.esm.js?0c79:268 __proto.select @ selecto.esm.js?d436:1063 __proto.check @ selecto.esm.js?d436:1182 Selecto._this.onDrag @ selecto.esm.js?d436:524 eval @ event-emitter.esm.js?0c79:211 __proto.emit @ event-emitter.esm.js?0c79:210 Gesto._this.onDrag @ gesto.esm.js?42f7:410

vue.runtime.esm.js?2b71:619 [Vue warn]: $listeners is readonly.

found in

---> <Selecto> <Page> at core/src/components/page/Page.vue <PageContainer> at core/src/components/page/PageContainer.vue <FractavaNotes> at core/src/components/FractavaNotes.vue <DevServer> at src/App.vue <Root> warn @ vue.runtime.esm.js?2b71:619 eval @ vue.runtime.esm.js?2b71:3506 reactiveSetter @ vue.runtime.esm.js?2b71:1045 updateChildComponent @ vue.runtime.esm.js?2b0e:4153 prepatch @ vue.runtime.esm.js?2b0e:3144 patchVnode @ vue.runtime.esm.js?2b0e:6352 updateChildren @ vue.runtime.esm.js?2b0e:6237 patchVnode @ vue.runtime.esm.js?2b0e:6363 patch @ vue.runtime.esm.js?2b0e:6526 Vue._update @ vue.runtime.esm.js?2b0e:3963 updateComponent @ vue.runtime.esm.js?2b0e:4081 get @ vue.runtime.esm.js?2b0e:4495 run @ vue.runtime.esm.js?2b0e:4570 flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326 eval @ vue.runtime.esm.js?2b0e:1989 flushCallbacks @ vue.runtime.esm.js?2b0e:1915 Promise.then (async) timerFunc @ vue.runtime.esm.js?2b0e:1942 nextTick @ vue.runtime.esm.js?2b0e:1999 queueWatcher @ vue.runtime.esm.js?2b0e:4418 update @ vue.runtime.esm.js?2b0e:4560 notify @ vue.runtime.esm.js?2b0e:730 reactiveSetter @ vue.runtime.esm.js?2b0e:1055 proxySetter @ vue.runtime.esm.js?2b0e:4644 onSelect @ Page.vue?4e63:123 invokeWithErrorHandling @ vue.runtime.esm.js?2b71:1854 invoker @ vue.runtime.esm.js?2b71:2179 invokeWithErrorHandling @ vue.runtime.esm.js?2b71:1854 Vue.$emit @ vue.runtime.esm.js?2b71:3888 eval @ selecto.esm.js?95c4:115 eval @ event-emitter.esm.js?0c79:211 __proto.emit @ event-emitter.esm.js?0c79:210 __proto.trigger @ event-emitter.esm.js?0c79:268 __proto.select @ selecto.esm.js?d436:1063 __proto.check @ selecto.esm.js?d436:1182 Selecto._this.onDrag @ selecto.esm.js?d436:524 eval @ event-emitter.esm.js?0c79:211 __proto.emit @ event-emitter.esm.js?0c79:210 Gesto._this.onDrag @ gesto.esm.js?42f7:410

Selecto Code:

<!-- selectableTargets.sync is a workaround -->
<VueSelecto
  :selectableTargets.sync='selectableTargets'
  :selectByClick="true"
  :selectFromInside="true"
  :continueSelect="false"
  :toggleContinueSelect='"shift"'
  :hitRate="100"
  @selectStart="onSelectStart"
  @select="onSelect"
  @selectEnd="onSelectEnd"
  @dragStart="onDragStart"
  @drag="onDrag"
  @dragEnd="onDragEnd"
/>

The only general answer to these errors I could find to search for two different vue instances/paths messing with each other. But that lead me nowhere because I only have one vue instance.'

[daybrush]

@JonathanTreffler

I don't know how to solve this problem.

But I fixed something in vue-selecto, check out 1.13.1.