title: Highcharts in Vue.js component
body: <p>I'm trying to create graphical components using Highcharts and Vue.js.
  I would like to pass the id attribute of the element to be used by Highcharts, but I can not get the attribute.</p>
  
  <p><strong>How can I set the id dynamically?</strong></p>
  
  <p>This is the HTML:</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-html lang-html prettyprint-override"><code>&lt;objective-chart :element="'brick-chart'"&gt;&lt;/objective-chart&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the javascript code:</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>&lt;template&gt;
      &lt;div id="{{element}}"&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import Highcharts from 'highcharts';
      export default{
          props: ['element'],
          ready(){
              $(function () {
  
                  new Highcharts.Chart({
                      chart: {
                          renderTo: this.element,
                          type: 'bar',
                          height: 200,
                          margin: [0, 20, 0, 40]
                      },
                      title: {
                          text: null
                      },
                      xAxis: {
  
                          lineColor: null,
                          labels: {
                              rotation: -90
                          },
                          categories: [
                              'Brick'
                          ]
                      },
                      yAxis: [{
  
                          min: 0,
                          max:100,
                          endOnTick: true,
                          maxPadding: 0.02,
                          gridLineColor: null,
  
                          title: {
                              text: null
                          },
                          labels: {
                              y: -50
                          },
  
  
                      }],
                      legend: {
                          shadow: false,
                          verticalAlign: 'bottom'
                      },
                      tooltip: {
                          shared: true,
                          followPointer: true
                      },
                      plotOptions: {
                          column: {
                              grouping: true,
                              shadow: false,
                              borderWidth: 0
                          }
                      },
                      credits: {
                          enabled: false
                      },
                      series: [{
                          name: 'Objetivo',
                          color: 'rgba(224,224,224,1)',
                          data: [100],
                          pointPadding: 0.3,
                          pointPlacement: -0.2
                      }, {
                          name: 'Realizado',
                          color: 'rgba(106,166,46,.9)',
                          data: [76],
                          pointPadding: 0.4,
                          pointPlacement: 0.1
                      }, {
                          type:'spline',
                          name: 'Projeção',
                          color: 'rgba(106,166,46,.9)',
                          top: 10,
                          pointPlacement: -0.05,
                          data: [95],
                          marker: {
                              radius: 8,
                              lineColor: '#666666',
                              lineWidth: 1
                          }
                      }]
                  });
              });
          }
      }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>