Computed depending on useComputed won't update on change

[Zoltan Feher]

First of all this experiment looks promising and it is interesting as well how will the hooks play well with normal vue components + functional ones. I've found the following problem when experimented with it.

I'm using the regular vue component version with template and the hooks property. If I define a computed via useComputed and then I build computed on the cm based on the hook computed that computed won't be updated when state changes in the hook state. Without hooks in regular vue components the same thing works if one of the computed depends on anoter and if that changes it will cause the reeavulation of the other one as well. With hook computed it doesn't work yet.

Checking the vue source how computeds created on the vm I see what is missing. There the getter of the computed is wrapped in another function which uses the watcher of the computed (all computeds has their own watcher vs hook computed has no watcher yet) to evaulaute and more importantly to call depend to register the dependency when it is used. This will probably needed in the hook version too somehow.

A simple example to reproduce the problem:

export default {
  template: `
    <div>
      count: {{count}}
      double: {{double}}
      quadruple: {{quadruple}}
      <button type="button" @click="increment">inc</button>
      <button type="button" @click="decrement">dec</button>
    </div>
  `,

  hooks() {
    const data = useData({ count: 0 })
    const double = useComputed(() => data.count * 2 )
    const increment = () => data.count = data.count + 1
    const decrement = () => data.count = data.count - 1
    return {
      count: data.count,
      double,
      increment,
      decrement
    }
  },

  computed: {
    quadruple () {
      // this won't update on increment/decrement
      return this.double * 2
    }
  }
}