Caso você também encontre dificuldades na hora de alterar o estilo de um radio button dentro de uma aplicação com Vue.js, esses trechos de códigos podem ser úteis!

Veja um exemplo de código para os os botões:

<div class="example ex1">
  <label class="form-control-label">Tipo</label>
  <br>
  <label class="radio entrada">
    <input type="radio" name="tipo" value="1" v-model="tipo"> 
    <span>Entrada</span>
  </label>
  <label class="radio saida">
    <input type="radio" name="tipo" value="2" v-model="tipo">
    <span>Saída</span>
  </label>
</div>

Esse código usa uma estrutura similar a encontrada em um radio button do Bootstrap.

Aplicado aos botões está o seguinte estilo:

.example {
  margin: 0px;
}
.example input {
  display: none;
}
.example label {
  margin-right: 4px;
  display: inline-block;
  cursor: pointer;
}

.ex1 span {
  background-color: #fff;
  display: block;
  padding: 5px 10px 5px 25px;
  border: 2px solid #ddd;
  border-radius: 5px;
  position: relative;
  transition: all 0.25s linear;
}
.ex1 span:before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  -webkit-transform: translatey(-50%);
  transform: translatey(-50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ddd;
  transition: all 0.25s linear;
}
.ex1 input:checked + span {
  background-color: #fff;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
}
.ex1 .entrada input:checked + span {
  color: #2dce89;
  border-color: #2dce89;
  background-color: #fff;
}
.ex1 .entrada input:checked + span:before {
  background-color: #2dce89;
}
.ex1 .saida input:checked + span {
  color: #f5365c;
  border-color: #f5365c;
  background-color: #fff;
}
.ex1 .saida input:checked + span:before {
  background-color: #f5365c;
}

Juntando tudo isso, você chega a esse resultado:

Gostou do resultado?

Não era isso que procurava? Se você quer apenas estilizar um radio button usando apenas o Bootstrap, o código seria esse:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Ativo
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Opção 1
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Opção 2
  </label>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<script>
$(document).ready(function(){
  $(".btn-secondary:first").click(function(){
    $(this).button('toggle');
  });   
});
</script>

Materiais:
– Vue.js
– Stackoverflow
– Bootstrap
– w3schools