[Vue warn]: Error in callback for immediate watcher "data"の解決方法

つい先日Element UIを触っていた際に、ふとコンソールを開いてみると下記の画像のようなエラーが出ていました。動作自体は特に問題なさそうでした。

Element UI
https://element.eleme.io/#/en-US

ちなみに使っていたのは、Element UIをベースにしたVue-admin-elementでした。

Vue-admin-element
ご存じない方は下記で遊べるんで見てみてください。
https://panjiachen.github.io/vue-element-admin/#/login?redirect=%2Fdashboard

原因をネット上で探すもなかなか見つからなかったのですが何とか海外の記事を見つけ解決しました。日本語の記事がなかったのでここに記載することにしました。

解決方法

状況の再現

Element UIで見つけたテーブルをVue-admin-element内でちょうど下記のように使おうとしていた時でした。

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all>
      <el-table-column
        prop="date"
        label="date"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        sortable
        width="180">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: null
      }
    }
  }
</script>

テーブル内に表示するデータをAPIで取得することを想定していたので、scriptタグ内の変数tableDataを宣言する必要があるんですが（オマケ参照）、

data() {
  return {
    tableData: null
  }
}

としていました。
この時点でコンソールを見ていただくと上記画像のエラーが出ているはずです。

解決方法

tableDataにnullの代わりに空配列を渡すとエラーが見事消えます。

data() {
  return {
    tableData: []
  }
}

原因の考察

Vue-admin-element内のテーブルだとnullで動作していたのですが、Element UIページから移植したパーツではこのようなエラーが出てしまったんだと思います。

defaultで変数を宣言する際に、変数に格納されるデータの形式が配列であるとか、オブジェクトなのかとかを気にする必要があるケースが存在するのかもしれません。

注）エラー解決方法を記していてくれた元サイトなんですが、再び見つけることができなかったのでリンクが貼れませんでした。どうやってあそこにたどり着けたのかも、もはや思い出せません。

オマケ

data() {
  return {
  }
}

なんて書くと

[Vue warn]: Property or method "tableData" is not defined on the instance but referenced during render

て怒られます。