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.

[mak7an]

I understand that, I not understand if is normal to use that in that way.
If it work, when I can use it in that way, to change it :)?

[hubdidub]

There is nothing wrong with using nested properties in v-model like in v-model="test.one" and it doesn't matter if test is a computed property with no setter

[mak7an]

But it return value from store and when I modify the test.one=1 the store is also modified. Is normal to use store that?

[hubdidub]

Not sure what you mean with normal.
Of course the store is modified because it holds the test variable. If you want to prevent that, you can clone test to make it independent from the store.