Merge branch 'master' of github.com:vuejs/docs-next

Author: NataliaTepluhina

src/api/global-api.md

@@ -136,7 +136,7 @@ Creates an async component that will be loaded only when it's necessary.
 
 ### Arguments
 
-For basic usage, `defineAsyncComponent` can accept a a factory function returning a `Promise`. Promise's `resolve` callback should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed.
+For basic usage, `defineAsyncComponent` can accept a factory function returning a `Promise`. Promise's `resolve` callback should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed.
 
 ```js
 import { defineAsyncComponent } from 'vue'

src/api/instance-methods.md

@@ -14,7 +14,7 @@
 
 - **Usage:**
 
-  Watch an expression or a computed function on the Vue instance for changes. The callback gets called with the new value and the old value. The expression only accepts dot-delimited paths. For more complex expressions, use a function instead.
+  Watch a reactive property or a computed function on the Vue instance for changes. The callback gets called with the new value and the old value for the given property. We can only pass top-level `data`, `prop`, or `computed` property name as a string. For more complex expressions or nested properties, use a function instead.
 
 - **Example:**
 
@@ -23,16 +23,28 @@
     data() {
       return {
         a: 1,
-        b: 2
+        b: 2,
+        c: {
+          d: 3,
+          e: 4
+        }
       }
     },
     created() {
-      // keypath
+      // top-level property name
       this.$watch('a', (newVal, oldVal) => {
         // do something
       })
 
-      // function
+      // function for watching a single nested property
+      this.$watch(
+        () => this.c.d,
+        (newVal, oldVal) => {
+          // do something
+        }
+      )
+
+      // function for watching a complex expression
       this.$watch(
         // every time the expression `this.a + this.b` yields a different result,
         // the handler will be called. It's as if we were watching a computed

src/guide/computed.md

@@ -93,7 +93,7 @@ You may have noticed we can achieve the same result by invoking a method in the
 ```js
 // in component
 methods: {
-  calculateBooksMessage()() {
+  calculateBooksMessage() {
     return this.author.books.length > 0 ? 'Yes' : 'No'
   }
 }

src/guide/migration/introduction.md

@@ -38,6 +38,7 @@ The following consists a list of breaking changes from 2.x:
 - Some transition classes got a rename:
   - `v-enter` -> `v-enter-from`
   - `v-leave` -> `v-leave-from`
+- [Component watch option](/api/options-data.html#watch) and [instance method `$watch`](/api/instance-methods.html#watch) no longer supports dot-delimited string paths, use a computed function as the parameter instead
 
 ### Removed