How to input formatted with async v-model

[miladfa7]

i use vue currency Input for input formatted numbers.
I created two files:

CurrencyInput.vue

<template>
  <input  class="form-control form-control-solid" ref="inputRef" type="text" :value="formattedValue" />
</template>

<script>
import { useCurrencyInput } from "vue-currency-input";

export default {
  name: "CurrencyInput",
  components:{
    
  },
  props: {
    modelValue: Number,
    options: Object,
  },
  setup(props) {
    const { formattedValue, inputRef, setOptions,setValue } = useCurrencyInput(props.options);
    
    return { inputRef, formattedValue };
  },
};
</script>

Price.vue

    <template>

      <CurrencyInput  v-model="landscape.price"  :options=options />
      <CurrencyInput  v-model="landscape.area"  :options=options />     
           
    </template>

    <script lang="ts">
     import CurrencyInput from "./CurrencyInput.vue";
     import { landGet } from "@/core/services/Services.js"

    interface var {
	price: number;
	area: number;
	};

   export default defineComponent({
    components: {
     },
   props:{
     projectid:String;
   },
   setup(props) {
     
    const landscape = ref<var>({
        price: 0,
        area: 0,
     })  
   // async get request 

    landGet(route).then(res=>{
   // i use landscape in v-modal
    landscape.value = {
        price : res.landscape.price,
        area : res.landscape.area
    }

   }
 }
    
</script>

questions

1. CurrencyInput price and area vlaue zero (0) ? why?
2. When I set the constant value of the variable, the price and area vlaue in CurrencyInput are displayed correctly
   landscape.value = {
   price:2000000,
   area:3000000
   }

Why zero values are displayed when I use async mode?

[dm4t2]

Adding a watcher on modelValue should solve your issue: https://dm4t2.github.io/vue-currency-input/guide.html#external-props-changes

[miladfa7]

@dm4t2 Thank you very much. I had been involved in this for a week