diferença entre methods e computed

Olá Leveditor, tudo bem com você?

A principal diferença entre computed e methods tem haver com o cachê, ou seja, se você utiliza a função dentro de methods ela necessitará ser executada sempre para ter o retorno.

Enquanto utilizando computed existe um cachê que irá reexecutar a função apenas caso alguma dependência (ex: variável) for alterada, caso contrário ele não irá processar novamente, pois já tem o resultado da função no cachê, entendeu?

Vou dar um exemplo: Imagine que precisamos inverter uma String

<div id="exemplo">
    <p> Mensagem Original: " {{mensagem}}" </p>
    <p> Mensagem Ao Contrário: "{{ mensagemInvertida}}" </p>
</div>

E teremos em computed:

computed: {
    mensagemInvertida: function() {
        return this.mensagem.split('').reverse().join()
    }
}

Veja que quando utilizamos computed em nosso template iremos chamar como se fosse uma propriedade e não uma função.

Podemos ter o mesmo resultado utilizando methods da seguinte maneira

<p> Mensagem ao contrário: "{{ mensagemInvertida()}}" </p>

methods: {
    mensagemInvertida: function() {
        return this.mensagem.split('').reverse().join()
    }
}

Veja que dessa forma precisamos em nosso template executar a função e sempre que nosso site renderizar teremos que rodar novamente, enquanto utilizando o computed a função só iria reexecutar caso a String tivesse mudanças.

Dessa forma podemos ver que uma boa utilização para computed é quando temos que fazer uma conta complexa ou pesada, pois caso o site tenha que renderizar novamente já terá guardado o resultado, tornando mais rápido e eficiente o processamento ;)

Ficou claro? Vou deixar um link da documentação do Vue que te da bons exemplos para você poder ler um pouco mais sobre esse assunto: Methods x Computed

Abraços e Bons Estudos!