docs (#157): add data object api changes to migration guide (#165)

* docs (#157): add data object api changes to migration guide

* docs (#157): improve clarity

Co-authored-by: Natalia Tepluhina <[email protected]>

* docs (#162): update syntax

Co-authored-by: Natalia Tepluhina <[email protected]>

* docs (#157): remove misleading tag

Co-authored-by: Natalia Tepluhina <[email protected]>

Author: bencodezen

src/.vuepress/config.js

@@ -94,6 +94,7 @@ const sidebar = {
         'migration/functional-components',
         'migration/async-components',
         'migration/custom-directives',
+        'migration/data-option',
         'migration/filters',
         'migration/fragments',
         'migration/render-function-api',

src/guide/migration/data-option.md

@@ -0,0 +1,67 @@
+---
+types:
+  - breaking
+---
+
+# Data Option <span v-for="type in $frontmatter.types" class="badge" :key="`type-${type}`">{{ type }}</span>
+
+## Overview
+
+- **BREAKING**: `data` component 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({
+    data() {
+      return {
+        apiKey: 'a1b2c3'
+      }
+    }
+  }).mount('#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