Reactive objects unwrapped and mutated by the template

[rchl]

In v1.0.0-beta.11 and since v1.0.0-beta.7 or maybe later version (haven't checked exactly), I'm seeing weird behavior with my refs being unwrapped in watchers. For example:

<template>
  <div>Check the console</div>
</template>

<script>
import { reactive, watchEffect, ref } from "@vue/composition-api";

export default {
  setup() {
    const temp = ref("xxx");

    const state = {
      value: ref(0)
    };

    watchEffect(() => {
      console.log("state.value:", state.value);
      temp.value = "";
    });

    return {
      state: reactive(state)
    };
  }
};
</script>

When you open the console you'll see that the first time the watchEffect is triggered the state.value is a ref (RefImpl). The second time it's just an unwrapped number.

It only happens when returning "reactive" state to the template.

Here is a live demo: https://codesandbox.io/s/lucid-hooks-y48qt?file=/src/App.vue:0-408

[pikax]

Vue2 reactivity system mutates the original object, so when you do reactive will change 6our state object and unwrap it, this as nothing to do with the template.

---

That's one of the caveats of the Vue reactivity system, make sure you read the readme
https://github.com/vuejs/composition-api#reactive

[rchl]

Then it appears that the change that made it necessary to use reactive makes this plugin a lot more painful to use because previously it was possible to just return a plain object with refs to the template and template could mutate refs without affecting the original object. Something like:

setup() {
  return {
    someModel: useModel()
  }
}

Now it's necessary to use reactive in this case:

setup() {
  return {
    someModel: reactive(useModel())
  }
}

Which mutates the original model and causes mayhem ;)

I guess there is some way around it (maybe destructuring the model?), but it was nice that it worked before.

[pikax]

Yeah I know, personally I don't like to use the reactive that way, what you can do a deep unwrapping but that needs to be handled in the user land.

There's no good solution tbh, in v3 in other hand is not painful

[stam]

Man vue is so much worse than React+MobX it's insane