$watch example doesn't work because it uses const

[skirtles-code]

This example appears at https://v3.vuejs.org/api/instance-methods.html#watch:

const unwatch = vm.$watch(
  'value',
  function() {
    doSomething()
    if (unwatch) {
      unwatch()
    }
  },
  { immediate: true }
)

The same example appears in the Vue 2 docs but it uses var instead of const.

Unfortunately, the example doesn't work with const, it throws an error:

ReferenceError: Cannot access 'unwatch' before initialization

I've put it in JSFiddle so you can try it yourself: https://jsfiddle.net/skirtle/14r7sjn8/

Using let is much the same.

I see two relatively simple ways to fix it.

Solution 1 - Change it to var:

var unwatch = vm.$watch(

Solution 2 - Use let but on a separate line:

let unwatch = null

unwatch = vm.$watch(

I'm happy to make the change but I would appreciate some guidance on which approach to take.

[NataliaTepluhina]

@skirtles-code thank you for spotting this! I'd say let's go with let on a separate line, var feels a bit outdated 😅

[pmrotule]

This is not a good approach in my opinion since you want to unwatch no matter if unwatch is defined or not. With if (unwatch) unwatch(), it means it will never unwatch on the first callback execution.

A better solution would be to use setTimeout to call unwatch on the next tick:

const unwatch = vm.$watch(
  'value',
  function() {
    doSomething()
    setTimeout(() => unwatch())
    // Note that writing "setTimeout(unwatch)" would still throw an error because
    // you would still refer to the not-yet-defined variable
  },
  { immediate: true }
)

[Maxim-Mazurok]

#584 seems to be missing from the current docs: https://vuejs.org/api/component-instance.html#watch

The initialization issue as far as I understand only happens when used with immediate: true and when that immediate is actually in effect.