Version

3.2.31

Reproduction link

gitee.com

Steps to reproduce

I encountered an exception while using vue3 to encapsulate some code

let _instance;
class Editor {
    layerBoxList= []; 
    el;
    selectedComponent
    constructor() {
        if (_instance) {
            return _instance;
        }
        _instance = this;
        this._listener();
    }

    _listener() {
        //使用proxy实现
        
    }
}
let editor = new Editor();
editor.selectedComponent = {a:1}

First, this is a class I encapsulate

An exception occurred when I assigned a value to selectedcomponent

const editor = new Editor();
const selectLayer =（) => {
    editor .selectedComponent = props.layerData; //Props is the value passed by the parent component
}
selectLayer();
// Here are the calculation properties

const selectComponentClass = computed(() => {
    console.log("----");
    const { selectedComponent } = Editor;
    if (!selectedComponent) {
        return;
    }
    console.log(selectedComponent.componentId);
    console.log(props.layerData.componentId);
    if (Editor.selectedComponent.componentId === props.layerData.componentId) {
        return "active-component"
    }
})

I put the calculation attribute in div: class. When the selectedcomponent of the editor changes, the calculation attribute is not repeated. Is there any way to directly solve this problem？

What is expected?

You want to calculate the attribute repeatedly when the dependent value of the attribute changes

What is actually happening?

The calculation property is not executed repeatedly

Your reproduction is not minimal, please read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Most bugs should be reproducible with the SFC Playground.