updating v-autocomplete dynamically from parent component

Question

Im trying to update the v-autocomplete value set in custom component via the v-model directive , but that is not working as expected , unless there is some user interaction .

<template>
  <v-autocomplete
    :items="accounts"
    v-model="account_id"
    item-text="name"
    item-value="id"
    clearable
    :outlined="outlined"
    :dense="dense"
    :label="label"
    :rounded="rounded"
    cache-items
  >
  </v-autocomplete>
</template>
<script>
export default {
    name:"account-select",
    props:['top','rounded','dense','outlined','label','value'],
    data(){
        return{
            accounts:[],
            types:[],
            account_id:null,
        };
    },
    mounted(){
        this.getAccounts();
        this.top = this.$props.top;
        this.rounded = this.$props.rounded;
        this.dense = this.$props.dense;
        this.outlined = this.$props.outlined;
        this.label = this.$props.label;
        this.rounded = this.$props.rounded;
        this.account_id = this.$props.value;
    },
    methods:{
      getAccounts(){
      //some code is here to get this.accounts value from api
      }
    },
    watch:{
        account_id:function(val){
            this.$emit("input",val);
        },
    }
}
</script>

in parent component , when I try to mount this component I do it like this

  <account-select v-model="item.account_id" top="2" />

this works fine as there exists user interaction to the component .

but when I try to make it dynamically like this

this.item.account_id=1;

nothing happens to the component and it doesnt update to show up the selected item .

so how can I solve this problem ?