[SOLVED] Getting write operation failed warning with refs

Getting write operation failed warning with refs

I'm getting Write operation failed: computed value is readonly error with refs in vue3. Here's the code.

export interface CursorPosition {
    node: Node
    placement: 'before' | 'inside' | 'after'
}
const rootCursorPosition = ref<CursorPosition | null>(null)
const setCursorPosition = (pos) => {
    if (isRoot.value) {
        rootCursorPosition.value = pos
        return
    }
}

The code works but this warning has been driving me nuts. The warning just doesn't make sense. Any idea on how to get rid of this warning?

Solution

So, after two days of struggle, finally figured out what was happening. As most of you pointed out, a computed property was indeed being modified. Just not at the place the warning in the console was pointing me to. It was in an entirely different section of code.

To debug, I set get and set methods in each computed properties like below:

const temp = computed({
    get: () => 'hello world',
    set: (val) => console.log('temp', val)
})

This allowed me to pin-point which computed data was being modified. Then, I checked each place in code where the computed value was being used and finally found out where the computed data was being modified.

Hopefully, this helps someone in the future if they end up in a similar situation as me.