Vueで、propsの初期値にアロー関数を設定するとエラーになってしまう

Question

ブラウザのコンソールで以下を実行すると、エラーにならずtestと表示されます。

const a = () => { console.log("test") }
a()

しかし、Vueのコンポーネントのpropsの初期値にアロー関数を設定すると、JavaScriptエラーになります。
（呼び出し元でpropsに実際の関数を渡して上書きすると、正常に動作します）

TypeError: t.form.methods.search is not a function

<template>
  <a @click="form.methods.search()">
    検索
  </a>
</template>

<script>
export default {
  name: 'Hoge',
  props: {
    form: {
      type: Object,
      default: () => {
        return {
          params: {
            keyword: "",
          },
          methods: {
            search: () => { console.log("search method not defined.") },
          },
        }
      }
    },
  },
}
</script>

なぜこのような挙動になるのでしょうか。
また、methodsに定義するのではなく、アロー関数のままでデフォルトの関数を動作させる方法はありますか？

ご教示のほど、よろしくお願いいたしますm(_ _)m

Answer 1

使わないでくださいと書いてあります。理由も書いてあります。
https://jp.vuejs.org/v2/api/#methods

メソッドを定義するためにアロー関数を使用すべきではないこと (例 plus: () => this.a++) に注意してください。アロー関数は、this が期待する Vue インスタンスではなく、this.a が undefined になるため、親コンテキストに束縛できないことが理由です。

https://qiita.com/Keitaro/items/d48733a19c10889e2365

Comments

[belgh]

ありがとうございます！
勉強不足でした。。