Build a currency converter in Vue Js

HTML FILE

<!--Html Start -->
<template>
   <div class="home">
      <div class="container my-5">
         <div class="row">
            <div class="col-6">
               <label >From</label>
               <select name="" v-model="from" id="" class="form-control">
                  <option :value="currency.id"  v-for="currency in formattedCurrencies">
                     {{currency.currencyName}}
                  </option>
               </select>
            </div>
            <div class="col-6">
               <label >To</label>
               <select name="" id="" v-model="to" class="form-control" >
                  <option :value="currency.id" v-for="currency in formattedCurrencies">
                     {{currency.currencyName}}
                  </option>
               </select>
            </div>
         </div>
         <div class="row">
            <div class="col-md-6 offset-md-3">
               <input type="text" v-model="amount" placeholder="Amount" class="form-control  my-5">
               <div class="text-center">
                  <button class="btn btn-lg btn-primary" :disabled="disabled" @click="convertCurrency()">
                  {{loading ? 'Converting...' : 'Convert'}}
                  </button>
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-6 offset-md-3">
               <div class="text-center display-2 mt-5">
                  {{calculateResult}}
               </div>
            </div>
         </div>
      </div>
   </div>
</template>
<!--Html End -->

SCRIPT FILE

<!--Script Start -->
<script>
   export default {
     name: "Home",
     components: {
       
     },
     data(){
        return {
         currencies:{},
         amount:0,
         from:'',
         to:'',
         result:0,
         loading:false
        }
     },
     mounted(){
       this.getCurrencies()
     },
     computed:{
       formattedCurrencies(){
         return Object.values(this.currencies);
   
       },
       calculateResult(){
         return (Number(this.amount)*this.result).toFixed(3);
       },
       disabled(){
         return this.amount===0 || !this.amount ||this.loading;
       }
   
     },
    methods:{
       getCurrencies(){
         const currencies=localStorage.getItem('currencies')
         if(currencies){
           this.currencies=JSON.parse(currencies);
           return;
         }
       axios.get('https://free.currconv.com/api/v7/currencies?apiKey=do-not-use-this-key')
       .then(response=>{
         this.currencies=response.data.results;
         localStorage.setItem('currencies', JSON.stringify(response.data.results))
       })
   
     },
     convertCurrency(){
       const key=`${this.from}_${this.to}`;
       this.loading=true;
       axios.get(`http://free.currencyconverterapi.com/api/v6/convert?  q=${key}&compact=ultra&apiKey=cce3d59acc8071b1df60`)
       .then((response)=>{
         this.loading=false;
         this.result=response.data[key]
       })
     }
   
   },
   watch:{
     from(){
       this.result =0;
     },
      to(){
       this.result =0;
     }
   }
   };
</script>
<!--Script End -->