Model and computed property

[mak7an]

I have a component with computed property test which I use for v-model.
If computed is without set it throw error. With setter work.

<template>
  <input type="text" v-model="test" />
</template>

class TestComponent {
  get test() {
    return this.myStore?.test || {}
  }

  set test(value) {
    console.log('=====>>', value)
  }
}

If test is object and i use it's property for v-model <other v-model="test.one" /> when it work without setter (to test), store is changing when I edit text.

If I add setter it is never called (when i edit text in text field, is called if i atatch new value to it, in mounted hook for example: this.test = { test: 1 }).

Can I use v-model="test.one" ?

[hubdidub]

The setter for test is called whenever test = ... is executed. That's what happens when you use v-model="test". This explains why you get an error when you don't implement the setter in that case.

When you use v-model="test.one" then under the hood this code is executed: test.one = ....
No setter for test is needed for that because one is the thing that gets set.