Vue Problem

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
<span v-money>{{test}}</span>
<button @click="getNewValue()">Get New Value</button>

</div>

Babel + JSX

const formatNumber = (el) => {

   let valorFinal = el.innerHTML;

   if(valorFinal.includes(',')) valorFinal = valorFinal.replace(/\./g, "").replace(',','.'); 

   el.innerHTML = parseFloat(valorFinal).toLocaleString('pt-BR', {minimumFractionDigits: 2,maximumFractionDigits: 2});
};

Vue.directive('money', {
   inserted: function (el) {
      let waitingAPI = setInterval(function () {
         if (el.innerHTML != null && el.innerHTML != '') {
            clearInterval(waitingAPI);
            formatNumber(el);
         }
      }, 300);
   },
   update(el){
       formatNumber(el);
   }
})

const demo = new Vue({
  el: '#app',

  data:{
    test: 10.25
  },
  methods:{
    getNewValue(){
      setTimeout( () => {
        alert('Response Success API!')
        this.test = 1300.25
      },1000)
    }
  }
 
});