Vue.jsでのmethodsとcomputedの違い

違いは「キャッシュ」です。

methodsは、処理が呼び出されるとつねに処理を実行する。
computedは、参照するプロパティが変更した時にのみ再計算され、変更のない場合は、以前算出した値を即座に返す。

ついでにfilterとも比較

方法	キャッシュ	利用場面
methods	しない	主にユーザーアクションのイベント処理に利用
computed	する	主に画面表示項目に利用
filter	しない	アプリケーション共通の処理で利用

サンプルコード

html部分

<div id="main">
  <button @click="update = !update">更新</button>
  <p v-if="update">
    methods: {{ method() }} <br/>
    computed: {{ prop }}
  </p>
</div>

vueの部分

new Vue({
  el: "#main",
  data: {
    update: true
  },
  methods: {
    method() {
       return new Date.toLocaleString();
    }
  },
  computed: {
    prop() {
       return new Date.toLocaleString();
    }
  }
});

サンプルコードのページにアクセスすると

methods: 2020/1/1 1:00:00
computed: 2020/1/1 1:00:00

が表示される。更新のボタンを押すと

methods: 2020/1/1 1:00:10
computed: 2020/1/1 1:00:00

と表示される。

methodsは更新されるが、キャッシュがあるためcomputedは更新されない。

参考

Webデザインの現場で使えるVue.jsの教科書