From 26bc30308da0564bc8e0887d845de66773330341 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Mon, 13 Jul 2020 21:54:41 -0400
Subject: [PATCH 1/4] docs (#157): add data object api changes to migration
 guide

---
 src/.vuepress/config.js            |  3 +-
 src/guide/migration/data-option.md | 71 ++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 src/guide/migration/data-option.md

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index af6106dce0..6fe72c9ba9 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -93,7 +93,8 @@ const sidebar = {
         'migration/v-model',
         'migration/functional-components',
         'migration/async-components',
-        'migration/custom-directives'
+        'migration/custom-directives',
+        'migration/data-option'
       ]
     },
     {
diff --git a/src/guide/migration/data-option.md b/src/guide/migration/data-option.md
new file mode 100644
index 0000000000..4614b4291f
--- /dev/null
+++ b/src/guide/migration/data-option.md
@@ -0,0 +1,71 @@
+---
+types:
+  - removed
+  - breaking
+---
+
+# Data Option <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+
+## Overview
+
+- **BREAKING**: `data` option declaration no longer accepts a plain JavaScript `object` and expects a `function` declaration.
+
+## 2.x Syntax
+
+In 2.x, developers could define the `data` option with either an `object` or a `function`.
+
+For example:
+
+```html
+<!-- Object Declaration -->
+<script>
+  const app = new Vue({
+    data: {
+      apiKey: 'a1b2c3'
+    }
+  })
+</script>
+
+<!-- Function Declaration -->
+<script>
+  const app = new Vue({
+    data() {
+      return {
+        apiKey: 'a1b2c3'
+      }
+    }
+  })
+</script>
+```
+
+Though this provided some convenience in terms of root instances having a shared state, this has led to confusion due to the fact that its only possible on the root instance.
+
+## 3.x Update
+
+In 3.x, the `data` option has been standardized to only accept a `function` that returns an `object`.
+
+Using the example above, there would only be one possible implementation of the code:
+
+```html
+<script>
+  import { createApp } from 'vue'
+
+  createApp().mount(
+    {
+      data() {
+        return {
+          apiKey: 'a1b2c3'
+        }
+      }
+    },
+    '#app'
+  )
+</script>
+```
+
+## How to Migrate
+
+For users relying on the object declaration, we recommend:
+
+- Extracting the shared data into an external object and using it as a property in `data`
+- Rewrite references to the shared data to point to a new shared object

From bd7bf824632994460617d9bcde1a8f34af666e95 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 14 Jul 2020 10:07:34 -0400
Subject: [PATCH 2/4] docs (#157): improve clarity

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>
---
 src/guide/migration/data-option.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/migration/data-option.md b/src/guide/migration/data-option.md
index 4614b4291f..bd35500a6b 100644
--- a/src/guide/migration/data-option.md
+++ b/src/guide/migration/data-option.md
@@ -8,7 +8,7 @@ types:
 
 ## Overview
 
-- **BREAKING**: `data` option declaration no longer accepts a plain JavaScript `object` and expects a `function` declaration.
+- **BREAKING**: `data` component option declaration no longer accepts a plain JavaScript `object` and expects a `function` declaration.
 
 ## 2.x Syntax
 

From 087f4f938b6b6d315e72faf52f8376d694ee5bf7 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 14 Jul 2020 10:07:48 -0400
Subject: [PATCH 3/4] docs (#162): update syntax

Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>
---
 src/guide/migration/data-option.md | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/guide/migration/data-option.md b/src/guide/migration/data-option.md
index bd35500a6b..c301ebf1de 100644
--- a/src/guide/migration/data-option.md
+++ b/src/guide/migration/data-option.md
@@ -50,16 +50,13 @@ Using the example above, there would only be one possible implementation of the
 <script>
   import { createApp } from 'vue'
 
-  createApp().mount(
-    {
-      data() {
-        return {
-          apiKey: 'a1b2c3'
-        }
-      }
-    },
-    '#app'
-  )
+createApp({
+  data() {
+    return {
+      apiKey: 'a1b2c3'
+    }
+  }
+}).mount('#app')
 </script>
 ```
 

From d3017567b19c9e0e5d66cbc6349c3b5e20798f5d Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Tue, 14 Jul 2020 10:08:51 -0400
Subject: [PATCH 4/4] docs (#157): remove misleading tag

---
 src/guide/migration/data-option.md | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/guide/migration/data-option.md b/src/guide/migration/data-option.md
index c301ebf1de..ee2e759adb 100644
--- a/src/guide/migration/data-option.md
+++ b/src/guide/migration/data-option.md
@@ -1,6 +1,5 @@
 ---
 types:
-  - removed
   - breaking
 ---
 
@@ -50,13 +49,13 @@ Using the example above, there would only be one possible implementation of the
 <script>
   import { createApp } from 'vue'
 
-createApp({
-  data() {
-    return {
-      apiKey: 'a1b2c3'
+  createApp({
+    data() {
+      return {
+        apiKey: 'a1b2c3'
+      }
     }
-  }
-}).mount('#app')
+  }).mount('#app')
 </script>
 ```