Circular object values crash <select> update

[Tamschi]

Vue.js version

2.2.1

Reproduction Link

https://jsfiddle.net/Tamschi/6q4Ljk0j/

Steps to reproduce

Create a vue-backed <select> element that satisfies the following conditions:

• The selected value is an object.
• At least one <option> has an object value.
• At least one of these instances leads to a circular reference and does not appear only after a value that loosely equals the selected value in the option list.

What is Expected?

The Vue.js app should select the right option and avoid a crash.

What is actually happening?

The app crashes with

Uncaught TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at looseEqual (vue@2.2.1:225)
    at setSelected (vue@2.2.1:6674)
    at cb (vue@2.2.1:6616)
    at inserted (vue@2.2.1:6618)
    at callHook$1 (vue@2.2.1:5102)
    at callInsert (vue@2.2.1:5045)
    at wrappedHook (vue@2.2.1:1690)
    at Object.invoker [as insert] (vue@2.2.1:1637)
    at invokeInsertHook (vue@2.2.1:4828)

looseEqual	@	vue@2.2.1:225
setSelected	@	vue@2.2.1:6674
cb	@	vue@2.2.1:6616
inserted	@	vue@2.2.1:6618
callHook$1	@	vue@2.2.1:5102
callInsert	@	vue@2.2.1:5045
wrappedHook	@	vue@2.2.1:1690
invoker	@	vue@2.2.1:1637
invokeInsertHook	@	vue@2.2.1:4828
patch	@	vue@2.2.1:4992
Vue._update	@	vue@2.2.1:1994
updateComponent	@	vue@2.2.1:2104
get	@	vue@2.2.1:2417
Watcher	@	vue@2.2.1:2400
mountComponent	@	vue@2.2.1:2114
Vue$3.$mount	@	vue@2.2.1:7153
Vue$3.$mount	@	vue@2.2.1:9154
Vue._init	@	vue@2.2.1:3652
Vue$3	@	vue@2.2.1:3733
window.onload	@	(index):48

in Chrome and

TypeError: cyclic object value 1 vue:225:12
	looseEqual https://unpkg.com/vue:225:12
	setSelected https://unpkg.com/vue:6674:11
	inserted/cb https://unpkg.com/vue:6616:9
	inserted https://unpkg.com/vue:6618:7
	callHook$1 https://unpkg.com/vue:5102:5
	_update/callInsert https://unpkg.com/vue:5045:9
	wrappedHook https://unpkg.com/vue:1690:5
	invoker https://unpkg.com/vue:1637:9
	invokeInsertHook https://unpkg.com/vue:4828:9
	patch https://unpkg.com/vue:4992:5
	lifecycleMixin/Vue.prototype._update https://unpkg.com/vue:1994:16
	mountComponent/updateComponent https://unpkg.com/vue:2104:7
	get https://unpkg.com/vue:2417:13
	Watcher https://unpkg.com/vue:2400:7
	mountComponent https://unpkg.com/vue:2114:17
	Vue$3.prototype.$mount https://unpkg.com/vue:7153:10
	Vue$3.prototype.$mount https://unpkg.com/vue:9154:10
	initMixin/Vue.prototype._init https://unpkg.com/vue:3652:7
	Vue$3 https://unpkg.com/vue:3733:3
	window.onload https://fiddle.jshell.net/Tamschi/6q4Ljk0j/show/:48:1

in Firefox. (I thought I'd include both traces since they contain slightly different information.)

[posva]

Why do you need a circular reference as the value of an option?

[Tamschi]

@posva The data in question models a game world with interdependent entities. It's easiest to make those relations configurable by binding them directly to option values.
@yyx990803 Thanks for the fast resolution!

At least for now, I'm still going with a custom <strict-select> component since my entities can appear the same to JSON.stringify without being functionally identical. I'm very new to web development though, so I'm not sure how correct my current implementation is.