Vue.js で、c3.js の Object を data に入れたら構造が変わった件

経緯

1. c3.js でグラフを描画するComponentを作ろうとした
2. c3.js の Object を後のイベントで更新するために、component の data に入れた
3. なんか色々methodoが消えてる！！

【例えばこんな感じ】

/**
 * Created by usr16001231 on 2017/03/13.
 */
Vue.component(
    'chart',
    'template' : '#chart'
    {
        props: ['chart_data'],
        data: function () {
            return {
                chartObj: null
            }
        },
        mounted: function () {
            this.chartObj = c３.generate({
                // 初期データ
            });
        },
        watch: {
            chart_data: function () {
                // Chart を更新する処理
            }
        }
        /** 以下省略 **/
    }
);

原因

1. Vue.js では data にセットされた値の更新なおを検知するため、設定したObjectの中身を更新します
2. Documentにも「オブジェクトはプレーンなものでなければなりません」と ちゃんと記載されていました
3. ちなみに Component の Props も同じ

教訓

1. やっぱりDocumentはちゃんと読みましょう

その他

1. こういう時ってそうするのが一番いいんでしょうね？