Updated does not trigger when changing reference type data in data

I recently encountered a problem that I referenced data type data in the data function. I changed the value of the object in my own method and did not trigger the updated function

data() {
 return {
	option: {
	  color: ["#2086cb"].title: {
	  	text: "Overtime Statistics",},grid: {
	  	left: "50px",},xAxis: {
	  	type: "value",},yAxis: {
	  	type: "category".data: []},series: {
	  	data: [].type: "bar",}}}; },Copy the code

• It is clear that the option reference datatype has several levels, so no matter which level OF option I change directly, the updated function will not trigger. This involves questions about the underlying data type and reference data type of a variable. Base data type. If you assign a value to a variable, that variable holds that value. The updated value does not trigger the updated value, so every time you change the value inside the property of the object, the address of the memory stored in the variable does not change. So how do I trigger the updated function?

// We can directly use object.assign () to generate a new Object and replace the previous Object.
Object.assign(
  {},
  {
  	color: ["#2086cb"].title: {
	  	text: "Overtime Statistics",},grid: {
	  	left: "50px",},xAxis: {
	  	type: "value",},yAxis: {
	  	type: "category".data: []},series: {
	  	data: [1.2.3.4.5].type: "bar",}})// But what I need to change is only a small part of the value of the object's attributes. It is very troublesome to copy so many values that do not need to be changed at all. So use Watch to deep monitor option instead of updated
watch: {
 option: {
  handler(newVal) {
  	if (!this.myChart) {
  	  this.setEchart();
  	}
  	this.chartChange();
  },
  deep: true,},Copy the code