【Vue.js】コンポーネントのdataは関数でないといけないらしい

【Vue.js】コンポーネントのdataは関数でないといけないらしい

Vue.jsでコンポーネントを定義したけど、コンソールに
should be a function that returns a per-instance value
というエラーが出ている場合の対処法と、その原因について説明します。

should be a function that returns a per-instance valueの意味

まずは解決方法

Vue.jsでコンポーネントを書いている時に、このエラーに遭遇することがあるでしょう。
その場合、コンポーネントの定義のdataオプションを見直しましょう。

以下のような書き方はエラーとなります。

 

Vueインスタンスを生成する時とまったく同じように、dataオプションを宣言しているので、問題なさそうに見えますが、
コンポーネントの場合はそれではエラーになります。

 

以下のように書き換えてください。
dataオプションに指定する値を関数にします。

こうすれば、エラーが解消できるはずです。

エラーの原因

このエラーについて、Vue.jsの公式サイトでも説明されています。

公式サイトでは、以下のように説明されています。

コンポーネントの data オプションは関数でなければなりません。各インスタンスが返されるデータオブジェクトの独立したコピーを保持できるためです

理解力が足りないのか、僕には意味が理解できませんでした(^^;)
とりあえず、コンポーネントのdataオプションは関数でなければいけない。
ということを覚えておきましょう。