computed property is not updating value in v-text-field after execution

I am doing this excercise in vue.js 2.6.
I have a toggled button that has two values: ‘1’ or ‘2’, and I made a computed that depending on these previous values return other values

this returns either ‘1’ or ‘2’

<v-col cols="12" sm="12" md="4" lg="4" xl="4">
        <label>Toggle button</label><br />
        <v-btn-toggle v-model="backendprop.prop1" color="blue" class="form-control p-0" dense borderless>
          <v-btn v-for="option in BackendProp1" :key="option.value" :value="option.value">{{ option.label }}</v-btn>
        </v-btn-toggle>
      </v-col>

I want the value of this input updates accordingly to computed setValueBecauseToggledButton

      <v-col cols="12" sm="12" md="4" lg="4" xl="4">
        <label>Value depending on Toggled Button</label><br />
        <v-text-field
          v-model="backendprop.prop2"
          type="text"
          disabled
          outlined
          dense
          :value="setValueBecauseToggledButton"
        />
      </v-col>

and this is the computed value

computed:{
    setValueBecauseToggledButton(){      
        return this.backendprop?.prop1?.toString() === '2' ? 'Valid prop' : ''

    }

the behavior I expect is when I choose between the options of one input the other input should be updated

Placing console.log in setValueBecauseToggledButton shows me that is working perfectly, but it does nothing on the v-text-field

thanks in advanced

>Solution :

You could set a watcher on your property and then update the value for the v-text-field inside it.

<v-col cols="12" sm="12" md="4" lg="4" xl="4">
  <label>Value depending on Toggled Button</label><br />
  <v-text-field
    v-model="backendprop.prop2"
    type="text"
    disabled
    outlined
    dense
  />
</v-col>

watch: {
    'backendprop.prop1'(value){
        this.backendprop.prop2 = value.toString() === '2' ? 'Valid prop' : ''
    }
}