feat: Add watch changes (vuejs#314)

* feat(guide/migration): Added string parameter changes of 'watch'

* fix(api/instance-methods): Updated the behavior with a string parameter

* feat(api/instance-methods): Added an example for watching deep paths

* feat(api/instance-methods): Increased the clarity of the example

* feat(api/instance-methods): Clarified some terms
It was clashing with 'complex expression' in the example

* feat(api/instance-methods): Improve the clarity

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

* feat(api/instance-methods): Removed redundant comments

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

* feat(api/instance-methods): Clarified a term
Increased the harmony by using an already introduced term

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

Author: yusufkandemir

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/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