Porque em vez de usar um methods usou computed

Boa noite Luciano!

Apesar dos methods e computed properties serem parecidos (e até ser possível usar qualquer um dos dois para atender a uma mesma necessidade) eles possuem algumas diferenças que tornam o uso de um ou outro mais indicado em cada situação.

Os methods são funções que você geralmente vai utilizar para reagir a algum tipo de interação e elas podem receber argumentos.

Um exemplo seria você ter uma botão e nos methods criar uma função para executar a ação desse clique.

<template>
    <button @click="acao('Ação de exemplo')">Exemplo</button>
    <button @click="acao('Outra ação de exemplo')">Outro exemplo</button>
</template>

<script>
export default {
  methods: {
    acao(texto) {
      console.log(texto);
    }
  }
}
</script>

As computed properties não recebem argumentos, e geralmente representam um dado que é composto de outras informações que você tem. Podem ser cálculos ou algum tipo de texto e você as utiliza como se fossem mais um campo definido no data.

Uma coisa importante é que elas são cacheadas (https://br.vuejs.org/v2/guide/computed.html#Cache-de-computed-vs-Metodos). Isso significa que enquanto os valores que a compõe não sofrem alteração (no exemplo abaixo o nome e sobrenome que são usados pelo nomeCompleto) esse valor não precisa ser verificado novamente e existe um ganho de performance.

<template>
    <p>{{nomeCompleto}}</p>
</template>

<script>
export default {
  data: function() {
    return {
      nome: 'Pedro',
      sobrenome: 'Silva'
    };
  },
  computed: { 
    nomeCompleto: function() { 
      return `${this.nome} ${this.sobrenome}`; 
    } 
  } 
}
</script>

Para ficar mais claro esse mesmo exemplo do nome com methods e computed properties:

// HTML
<div id="app">
  <p>{{nomeCompletoComputed}}</p>
  <p>{{nomeCompletoMethod()}}</p>
  <p>{{contador}}</p>
  <button @click="contador++">Contador++</button>
</div>

//JS
new Vue({
  el: "#app",
  data: function () {
    return {
      nome: "Pedro",
      sobrenome: "Silva",
      contador: 0
    };
  },
  methods: {
    nomeCompletoMethod(texto) {
      console.log("method");
      return `${this.nome} ${this.sobrenome}`;
    }
  },
  computed: {
    nomeCompletoComputed: function () {
      console.log("computed");
      return `${this.nome} ${this.sobrenome}`;
    }
  }
});

Você pode ver esse exemplo rodando aqui: https://codepen.io/vueda/pen/qBVVzbz

Você vai notar que ao clicar no botão irá aparecer apenas o log no console de "method". O botão só altera o dado contador que não é usada por nenhum dos dois. O method sempre executa novamente, já a computed property não pois ela continua usando o valor em cache já que nome e sobrenome não mudaram.

Alguns dos exemplos e explicações eu tirei daqui (em inglês) caso queira dar uma olhada: https://medium.com/notonlycss/the-difference-between-computed-and-methods-in-vue-js-9cb05c59ed98