refactor: watch APIs default to trigger pre-flush (#566)

BREAKING CHANGE: watch APIs now default to use `flush: 'pre'` instead of
`flush: 'post'`.

  - Check vuejs/core@49bb447 

  - This change affects `watch`, `watchEffect`, the `watch` component
    option, and `this.$watch`.

  - As pointed out by @skirtles-code in
    [this comment](#1706 (comment)),
    Vue 2's watch behavior is pre-flush, and the ecosystem has many uses
    of watch that assumes the pre-flush behavior. Defaulting to post-flush
    can result in unnecessary re-renders without the users being aware of
    it.

  - With this change, watchers need to specify `{ flush: 'post' }` via
    options to trigger callback after Vue render updates. Note that
    specifying `{ flush: 'post' }` will also defer `watchEffect`'s
    initial run to wait for the component's initial render.

Author: the-owl

src/apis/watch.ts

@@ -83,7 +83,7 @@ function getWatcherOption(options?: Partial<WatchOptions>): WatchOptions {
     ...{
       immediate: false,
       deep: false,
-      flush: 'post',
+      flush: 'pre',
     },
     ...options,
   }
@@ -94,7 +94,7 @@ function getWatchEffectOption(options?: Partial<WatchOptions>): WatchOptions {
     ...{
       immediate: true,
       deep: false,
-      flush: 'post',
+      flush: 'pre',
     },
     ...options,
   }

test/apis/watch.spec.js

@@ -178,7 +178,7 @@ describe('api/watch', () => {
             spy(newVal, oldVal)
             rerenderedText = vm.$el.textContent
           },
-          { lazy: true }
+          { lazy: true, flush: 'post' }
         )
         return {
           a,
@@ -210,7 +210,7 @@ describe('api/watch', () => {
               rerenderedText = vm.$el.textContent
             }
           },
-          { immediate: true }
+          { immediate: true, flush: 'post' }
         )
         return {
           a,