vue: [Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"

Version

2.5.17

Reproduction link

https://jsfiddle.net/chrisvfritz/50wL7mdz/

Steps to reproduce

The error is at that function of vue.

/**
 * Helper that recursively merges two data objects together.
 */
function mergeData (to, from) {
  if (!from) { return to }
  var key, toVal, fromVal;
  var keys = Object.keys(from);
  for (var i = 0; i < keys.length; i  ) {
    key = keys[i];
    toVal = to[key];
    fromVal = from[key];
    if (!hasOwn(to, key)) {
      set(to, key, fromVal);
    } else if (isPlainObject(toVal) && isPlainObject(fromVal)) {
      mergeData(toVal, fromVal);
    }
  }

What is expected?

It is kinda weird and I don’t know from where it comes from or why is happening. So I can’t provide a link on how to reproduce it.

What is actually happening?

Many times the app is working perfectly but few times, this error appears. And the app is broken.

---

Sorry for not providing a Link to minimal reproduction but I don’t even know from where this error comes from since it is not happening every time.

For more info the error is showing by using those components:

<template>
	<div class="tasks-content">
		<v-tabs class="tabs" grow hide-slider height="60px" v-model="active_tab">
			<v-tab
					centered
					v-for="tab in tabs"
					:key="tab.name"
					:href="`#${tab.name}`"
					v-model="active_tab"
			>
				{{ tab.name }}
			</v-tab>
		</v-tabs>

		<v-tabs-items v-model="active_tab">
			<v-tab-item v-for="tab of tabs" :key="tab.id" :value="tab.name">
				<v-card flat>
					<!--<component :tasks="tasks" :is="active_tab"></component>-->
				</v-card>
			</v-tab-item>
		</v-tabs-items>
	</div>
</template>

<script>
	import MyTasks from './MyTasks.vue'
	import AllTasks from './AllTasks.vue'

	export default {
		name: 'TasksContent',
		components: {
			MyTasks, AllTasks
		},

		props: {
			tasks: Array
		},

		data: () => ({
			active_tab: 'MyTasks',
			tabs: [
				{ id: 1, name: 'MyTasks' },
				{ id: 2, name: 'AllTasks' },
			]
		}),

	}
</script>

<style lang="scss" scoped>
	.tasks-content {

	}
</style>

<template>
	<div class="my-tasks">
		<div class="chips">
			<v-chip small color="orange" text-color="white">
				<v-avatar class="teal">14</v-avatar>
				All
			</v-chip>

			<v-chip small color="orange" text-color="white">
				<v-avatar class="teal">9</v-avatar>
				Completed
			</v-chip>

			<v-chip small color="orange" text-color="white">
				<v-avatar class="teal">3</v-avatar>
				Pending
			</v-chip>

			<v-chip small color="orange" text-color="white">
				<v-avatar class="teal">2</v-avatar>
				Behind
			</v-chip>
		</div>
		<div class="custom-table">
			<div class="header">
				<div class="col">Assignee</div>
				<div class="col">Project</div>
				<div class="col">Status</div>
			</div>
			<div class="body">
				<div class="row" v-for="task in tasks" :key="tasks.id">
					<div class="assignee-col">
						<v-img :src="require('@/assets/temp/user.png')" height="40" width="40" />
					</div>
					<div class="project-col">
						{{ task.description.length > 25 ? task.description.slice(0, 40) : task.description }}
					</div>
					<div class="status-col">
						{{task.status}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MyTasks',
		props: {
			tasks: {
				type: Array,
				default: () => []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-tasks {
		.chips {
			padding: 20px 0;
		}
		.custom-table {
			.header {
				display: grid;
				grid-template-columns: 1fr 3fr 1fr;
				.col {
					padding: 10px;
				}
			}
			.body {
				.row {
					display: grid;
					grid-template-columns: 1fr 3fr 1fr;
					border-bottom: 1px solid gray;
					grid-gap: 5px;
					padding: 10px;
				}
			}
		}
	}
</style>