Highcharts in Vue.js component
<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>