How to inject object value to v-text when key was added during usegn aplication?

Question

This is my obj form backend

myObj = {
name:'nr123',
empty:''
}

On click function adds new key: value

function userClick(){
 this.myObj.status= "accept";
 console.log(this.myObj)
}

clg returns

myObj = {
name:'nr123',
empty:'',
satus:'accept'
}

but when i try to display it

<v-text>
Acceptation status {{ myObj.status }}
</v-text>

it won't work. And this is iteresting when i use "epty" (alredy declared key) to carry 'accept' every thing works fine so how to show acceptation status when it was added in a midle of the process?

(myObj is one of dinamicly created objects kept in array. Each of myObj's can assume diferent acceptation status)

Answer 1

You can use computed property.

Demo :

new Vue({
    el: '#app',
    data() {
        return {
        myObj: {
            name:'nr123',
            empty:''
        }
      }
    },
    computed: {
      newObj: function() {
        this.myObj.status = 'accept';
        return this.myObj;
      }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <p v-text="newObj.status"></p>
</div>