Botões com valores float

Olá Professor tudo bem? Será que você consegue me dar uma ajuda? Estou tentando criar 3 botões onde terão a mesma ação, ao clicar em um deles deve ser inserido um valor Float especifico dentro de um input. Porém estou com 2 problemas, no primeiro só consigo inserir valores inteiros mesmo que o input esteja com uma mascara, e no segundo ao começar a digitar em outro input o valor é apagado do input onde inseri os valores, segue abaixo o código que estou utilizando para melhor entendimento. Obrigado desde já.

Input onde deve ser inserido os valores Float:

<input type="number" class="form-control" id="saldopg1" placeholder="00,00"

           v-on:input="pagamento.pegaValor= $event.target.value" :value="pagamento.pegaValor" />

Botões com valores fixos:

Obs: tentei colocar valores float nos parametros mas ainda assim não funcionou.

      <md-button class="md-dense md-raised md-primary" id="btn20"  v-on:click='addvalor(20)'>+20</md-button>
      <md-button class="md-dense md-raised md-primary" id="btn50"  v-on:click="addvalor(50)">+50</md-button>
      <md-button class="md-dense md-raised md-primary" id="btn100" v-on:click="addvalor(100)">+100</md-button>

Função JavaScript:

addvalor(val){ result = document.getElementById('saldopg1'); result.value = result.value? parseInt(result.value) + parseInt(val) : parseInt(val);

},