title: Vue-Chartjs reactive chart options passing
body: <p>So I follow the author's doc and make a reactive chart just as the doc sample.</p>
  
  <p>A js file &amp; a vue file :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// the chart.js file
  import { Line, mixins } from 'vue-chartjs'
  const { reactiveProp } = mixins
  
  export default {
    extends: Line,
    mixins: [reactiveProp],
    props: ['options'],
    mounted () {
      this.renderChart(this.chartData, this.options)
    }
  }
  
  
  // the chart.vue file
  &lt;template&gt;
    &lt;div style="background:#fff;"&gt;
      &lt;line-chart :chart-data="datacollection"&gt;&lt;/line-chart&gt;
      &lt;button @click="fillData()"&gt;Randomize&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import LineChart from './chart'
  
  export default {
    components: {
      LineChart
    },
    data () {
      return {
        datacollection: null
      }
    },
    mounted () {
      this.styling()
      this.fillData()
    },
    methods: {
      fillData () {
        this.datacollection = {
          labels: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()],
          gridLines: {
            display: false
          },
          datasets: [
            {
              label: 'Data One',
              fill: false,
              borderColor: 'red',
              backgroundColor: 'red',
              borderWidth: 1,
              data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
            }
          ]
        }
      },
      styling () {
        this.Chart.defaults.global.elements.line.backgroundColor = '#1d3'
      },
      getRandomInt () {
        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
      }
    }
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is : 
  it seems that I can't pass options whatsoever.</p>
  
  <p>What I need to do is</p>
  
  <ol>
  <li>Hide all gridlines inculding x&amp;y</li>
  <li>Make the tooltips always displayed</li>
  </ol>
  
  <p>But I've tried every way possible and none of them works , even like :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Line, mixins } from 'vue-chartjs'
  const { reactiveProp } = mixins
  
  export default {
    extends: Line,
    mixins: [reactiveProp],
    props: ['options'],
    mounted () {
      this.renderChart(this.chartData, {
        scales: {
          xAxes: [{
            gridLines: {
              color: "rgba(0, 0, 0, 0)",
              display: false
            }
          }],
          yAxes: [{
            gridLines: {
              color: "rgba(0, 0, 0, 0)",
              display: false
            }
          }]
        }
      })
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>It won't work , tooltips is the same</p>
  
  <p>I just want to know , is it possible for reactive vuechartjs to pass options ? or I just need to use chartjs instead ?</p>