Discussion on: How does Reactivity work in Vue.js?

I'm a bit curious about how we handle "target" if there's a nested component. In your example, we put "target" as a global variable. That means only one target can be set at one time. But in the nested component. e.g. component A includes component B

watch(renderFunctionForA)

function readnerFunctionForA() {
  // render A.data
  watch(renderFunctionForB)
}

renderFunctionForB() {
  // Render B.data
}

In that case, I want the update of B.data() will only refresh renderFunctionForB(). How can we achieve that?