From 957d519923826bc3c6f831ce6a4fd6d442201ee7 Mon Sep 17 00:00:00 2001
From: WJ Lee <70941958+wjlee2020@users.noreply.github.com>
Date: Thu, 1 Feb 2024 21:41:11 +0900
Subject: [PATCH] Updates to `Updating Charts` documentation (#1082)

* Update index.md

- updated documentation for `updating charts` section

* Update index.md

- also updated Korean translation (i'm korean) regarding updating chart

* Update index.md
---
 website/src/guide/index.md    | 16 ++++++++++++
 website/src/kr/guide/index.md | 49 +++++++++++++++++++++--------------
 2 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/website/src/guide/index.md b/website/src/guide/index.md
index ac9dd416..3c499013 100644
--- a/website/src/guide/index.md
+++ b/website/src/guide/index.md
@@ -125,6 +125,22 @@ export default {
 </script>
 ```
 
+You may get Vue's `Target is readonly` warnings when you are updating your `chartData`.
+
+If your `chartData` is a `read-only` reactive value, you can override this warning by using a clone:
+
+```vue
+<template>
+  <Bar :data="JSON.stringify(JSON.parse(chartData))" :options="chartOptions" />
+</template>
+```
+
+Unless you have a writable computed `chartData`, you won't be able to use the newer `structuredClone`, as you'll likely hit the `Write operation failed: computed value is readonly` error.
+
+You don't need to use a clone if your `chartData` is a [writable computed value](https://vuejs.org/guide/essentials/computed#writable-computed).
+
+
+
 ## Access to Chart instance
 
 You can get access to chart instance via template refs.
diff --git a/website/src/kr/guide/index.md b/website/src/kr/guide/index.md
index 9d2b111b..e3e666c2 100644
--- a/website/src/kr/guide/index.md
+++ b/website/src/kr/guide/index.md
@@ -96,34 +96,45 @@ export default {
 
 ## 차트 데이터 업데이트
 
-Chart.js 자체는 데이터 세트를 변경할 때 라이브 업데이트 기능을 제공하지 않습니다. 그러나 `vue-chartjs`는 이것을 실현하기 위해 2 개의 mixin을 제공합니다.
+v4부터 차트는 기본적으로 데이터 변경 `watch`와 옵션 변경 `watch`가 있으므로 새 데이터 또는 새 옵션이 전달되면 (변경되면) Vue Chart 래퍼가 차트를 업데이트하거나 다시 렌더링합니다. v4부터는 믹스인이 제거되었습니다.
 
-- `reactiveProp`
-- `reactiveData`
-
-두 믹스 인은 실제로 동일한 결과를 얻습니다. 대부분의 경우 `reactiveProp`을 사용합니다. 이 믹스인은 차트 컴포넌트의 로직을 확장하고 자동으로 `chartData`라는 속성을 생성하고 이 속성에 `vue watch`를 추가합니다. 데이터가 변경되면, 데이터 세트내의 데이터만이 변경되고 있으면 `update()`를, 새로운 데이터 세트가 추가되고 있으면 `renderChart()`를 호출합니다.
+### 예제
 
-`ractiveData`는 속성이 아닌 로컬 chartData 변수를 만들고 Watcher를 추가합니다. 이것은 단일 목적 차트가 필요하고 차트 구성 요소 내에서 API 호출을 수행하는 경우에만 유용합니다.
+```vue
+<template>
+  <Bar :data="chartData" :options="chartOptions" />
+</template>
 
-### 예제
+<script>
+// DataPage.vue
+import { Bar } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
 
-**LineChart.js**
-```javascript
-import { Line, mixins } from 'vue-chartjs'
-const { reactiveProp } = mixins
+ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
 
 export default {
-  extends: Line,
-  mixins: [reactiveProp],
-  props: ['options'],
-  mounted () {
-    // this.chartData is created in the mixin.
-    // If you want to pass options please create a local options object
-    this.renderChart(this.chartData, this.options)
-  }
+  name: 'BarChart',
+  components: { Bar },
+  computed: {
+      chartData() { return /* mutable chart data */ },
+      chartOptions() { return /* mutable chart options */ }
+    }
 }
+</script>
 ```
 
+차트 데이터를 업데이트할 때 Vue의 `Target is read only` 경고가 나타날 수 있습니다.
+
+데이터가 '읽기 전용' (`read only`) 반응 값인 경우 클론을 사용하여 이 경고를 재정의할 수 있습니다
+
+```vue
+<template>
+  <Bar :data="JSON.stringify(JSON.parse(chartData))" :options="chartOptions" />
+</template>
+```
+
+차트 데이터가 수정 가능한 계산된 속성 경우 [writable computed value](https://vuejs.org/guide/essentials/computed#writable-computed) 클론을 사용할 필요가 없습니다
+
 **RandomChart.vue**
 
 ```javascript