reactive => toRef => reactive chain leads to dev tools incorrectly saying ref value is undefined

[henribru]

Vue devtools version

6.5.0

Link to minimal reproduction

https://play.vuejs.org/#eNp9kjFPwzAQhf/KyQupFKWVKpbSVgLUAQZApaOXkF6KS2JbtlOqRv7vnB2SFgl1Svzue3fvErfsXuvs0CCbsbktjNAOLLpGL7kUtVbGQQsG88KJA6bg1BpL8FAaVcMN2W645LJQ0joolYLFwCZtEGbAGT04Az+668GP3BAYWyVUTHvmkjj9bRUssQNl24gaVeOSZASLJbRcQpiUdeM5I5QzIn0Kt5PJJJjm424z2okODmtd5Q7pBNDGmNHs/a8Qh50Pp6wX5uPBy1LmLIUtxS7bWyXp88UknBWq1qJC86qdoGU4m3UZQy2vKvX9HDVnGkx7vfjE4usffW+PQePszaBFc0DOhprLzQ5dV169v+CR3odirbZNRfSV4hqtqpqQscMeGrml2BdcTPsUL4GQu41dHR1K2y8VggbSR54zugyPV1Y/x51m0+ijX8T8D/VF0/g=

Steps to reproduce & screenshots

Observe the state of foo, bar and baz in the devtools. foo.foo will initially have the value "foo" and so will bar.value, but baz.bar will show as undefined, despite the fact that in the template they all show as "foo". After 5 seconds, we change the value to "bar", and this is reflected in the template and in the devtools for foo and bar, but baz.bar is still shown as undefined.

What is expected?

foo.foo, bar.value and baz.bar should all show as "foo" at first and then "bar"

What is actually happening?

baz.bar is shown as undefined both before and after the change.

System Info

System:
    OS: Linux 6.2 Ubuntu 23.04 23.04 (Lunar Lobster)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
    Memory: 9.27 GB / 31.24 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.asdf/installs/nodejs/18.17.1/bin/node
    npm: 9.6.7 - ~/.asdf/plugins/nodejs/shims/npm
    Watchman: 4.9.0 - /usr/bin/watchman
  Browsers:
    Chromium: 116.0.5845.187
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

No response

[voxivoid]

hello 👋

I think I'm also facing this issue when doing a reactive => toRefs transformation. I managed to reproduce it with the following code

[kien-ht]

any update on this? I have encountered the same problem

[partyk]

I have the same problem and here is the code to simulate it. Link code

App.vue

<script setup>
import { ref } from 'vue'
import  useCounter from './useCounter';

const counter = useCounter();

const onUpdate = () => {
  counter.count1.value = counter.count1.value + 10;
};

console.log(counter);
</script>

<template>
  <ul>
    <li>{{counter.count1}}</li>
    <li>{{counter.count2}}</li>
    <li>{{counter.count3}}</li>
  </ul>
  <button @click="counter.incrementCount1()">Click count 1</button>
  <button @click="onUpdate()">Click count 1 +10</button>
  <button @click="counter.incrementCount2()">Click count 2</button>
  <button @click="counter.incrementCount3()">Click count 3</button>
</template>

useCounter.js

import { reactive, toRefs } from "vue";

export default function usePaginator() {
  const state = reactive({
    count1: 0,
    count2: 10,
    count3: 20,
  });

  const incrementCount1 = () => {
    state.count1++;
    console.log(state.count1);
  };
  const incrementCount2 = () => {
    state.count2++;
    console.log(state.count1);
  };
  const incrementCount3 = () => {
    state.count3++;
    console.log(state.count1);
  };

  return {
    ...toRefs(state),
    incrementCount1,
    incrementCount2,
    incrementCount3,
  }
};

[henribru]

Seems like this was a bug in Vue, as it works fine with Vue 3.5. No idea which commit fixed it.