Skip to content

Vue 2.7 ref from setup is not editable in devtools #2200

Open
@vasilyman

Description

@vasilyman

Vue devtools version

6.6.4

Link to minimal reproduction

https://stackblitz.com/~/github.com/vasilyman/vue6-devtools-problem?file=src/App.vue

Steps to reproduce & screenshots

I cant change value in ref variable through devtools. See error on debug mode:

backend.js:827 An error occurred in hook 'editComponentState' with payload: {app: Vue, componentInstance: VueComponent, path: Array(1), type: 'setup', state: {}, …}
callHandlers @ backend.js:827
callHook @ backend.js:271
editComponentState @ backend.js:422
editComponentState @ backend.js:1700
(anonymous) @ backend.js:2537
wrappedListener @ backend.js:7657
emit @ backend.js:11473
_emit @ backend.js:7708
(anonymous) @ backend.js:7643
(anonymous) @ backend.js:7643
listener @ backend.js:31872
postMessage
n @ VM1075 proxy.js:1Understand this errorAI
backend.js:828 TypeError: Cannot read properties of undefined (reading 'text')
    at StateEditor.get (backend.js:7946:22)
    at editState (backend.js:4678:38)
    at backend.js:5621:28
    at DevtoolsHookable.callHandlers (backend.js:824:17)
    at DevtoolsApi.callHook (backend.js:271:29)
    at DevtoolsApi.editComponentState (backend.js:422:32)
    at editComponentState (backend.js:1700:44)
    at backend.js:2537:46
    at Bridge.wrappedListener (backend.js:7657:15)
    at Bridge.emit (backend.js:11473:5)

Image

fragment of App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    {{ text }}
  </div>
</template>

<script>
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  setup() {
    const text = ref('');

    return {
      text,
    };
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

What is expected?

i can edit ref variable in devtools

What is actually happening?

i can't edit ref variable in devtools.

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (32) x64 Intel(R) Core(TM) i9-14900HX
    Memory: 18.19 GB / 31.05 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.18.0/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
  Browsers:
    Chrome: 132.0.6834.110
    Chromium: 131.0.6778.264

Any additional comments?

same problem in windows

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions