#2200·devtools-v6

Vue 2.7 ref from setup is not editable in devtools

Author: vasilymanCreated Jan 28, 2025Updated Jan 28, 2025

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:

javascript

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)

fragment of App.vue

xml

<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

bash

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

Source: vuejs/devtools-v6

View original on GitHub View discussion on GitHub