JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.1/vue-resource.min.js"></script>
<div id="main">
   <my-chart :mydata="data"  v-if="data"></my-chart>
</div>

JavaScript

Vue.component('my-chart', {
    template: '<div id="chartId">xcxc</div>',
    computed: {
        chartId: function() {
            return _.uniqueId('c3-chart-');
        }
    },
    mounted: function() {
        this.drawChart();
    },
    methods: {
        drawChart: function() {
            var self = this;
            var chart = c3.generate({
                bindto: '#chartId',
                data: self.mydata

            });
        }
    },
    props: ['mydata']
});

new Vue({
    el: '#main',
    beforeCreate: function() {
        var test = [];
        this.$http.get('https://jsonplaceholder.typicode.com/posts').then(function(data) {
            console.log(data.data)
            data.data.forEach(function(x, y) {
                console.log(x.title, x.id);
                test.push([x.title, x.id])
            })
            self.data = {columns:test, type: 'pie'};
            console.log(self.data)
        })
    },
    data: function() {
        return {
            data: {
                columns: [
                    ['data1', 30],
                    ['data2', 120],
                ],
                type: 'pie'
            }
        }
    }
});