Vue ChartJS Components

ChartPage.vue

<template>
  <div class="charts">
    <pie :domain="someData" :palette="color"></pie>
  </div>
</template>

<script>
import Pie from './PieChart'
import StackedBar from './StackedBar'

export default {
  name: 'chartPage',
  components: {
    'pie': Pie,
  },
  data () {
    return {
      someData: [3, 5, 2, 6, 10],
      color: {
        opaque: [
          'rgba(204, 153, 102, 1)',
          'rgba(255, 102, 204, 1)',
          'rgba(102, 204, 153, 1)',
          'rgba(255, 204, 102, 1)',
          'rgba(204, 153, 204, 1)',
          'rgba(255, 102, 51, 1)',
          'rgba(102, 153, 51, 1)',
          'rgba(102, 153, 255, 1)',
          'rgba(153, 204, 255, 1)',
          'rgba(255, 195, 0, 1)',
          'rgba(153, 0, 204, 1)',
          'rgba(102, 51, 51, 1)'
        ],
        translucent: [
          'rgba(204, 153, 102, 0.2)',
          'rgba(255, 102, 204, 0.2)',
          'rgba(102, 204, 153, 0.2)',
          'rgba(255, 204, 102, 0.2)',
          'rgba(204, 153, 204, 0.2)',
          'rgba(255, 102, 51, 0.2)',
          'rgba(102, 153, 51, 0.2)',
          'rgba(102, 153, 255, 0.2)',
          'rgba(153, 204, 255, 0.2)',
          'rgba(255, 195, 0, 0.2)',
          'rgba(153, 0, 204, 0.2)',
          'rgba(102, 51, 51, 0.2)'
        ]
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

PieChart.vue

<template>
  <div id="pie">
    <canvas ref="canvas" width="400px" height="400px">
    </canvas>
  </div>
</template>

<script>
import Chart from 'chart.js'

export default {
  name: 'pie',
  props: {
    domain: {
      type: Array,
      required: true
    },
    palette: {
      type: Object,
      required: true
    }
  },
  data () {
  //some data here//
  },
  computed: {
    color() {
      return this.color.opaque
    }
  },
  mounted () {
    this.chart = new Chart(this.$refs.canvas.getContext('2d'), {
      type: 'pie',
      data: {
       labels: [],
       datasets: [{
         data: this.domain,
         backgroundColor: this.color
       }]
      },
      options: {responsive: true}
    })
  }
}
</script>
<style>
#pie {
  width: 400px;
  height: 400px;
  display: inline-block;
}
</style>