Vue Highcharts Incorrect Margins Bug

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<h1>Vue-Highcharts Incorrect Margins and Size Bug</h1>
<p> <a href="https://vuejs.org/api/#v-cloak">v-cloak</a> is a vue directive that remains on an element until vue compilation is complete. As shown in here, it can be used to hide the page until everything vue is ready.</p>
<p>Unfortunately, if a highchart is attached to the page while one of its parent's are hidden, it will fail to render properly, even after the the parents have been made visible.</p>
<p>Remove the [v-cloak] css and re-run to see how the graph should look.</p>

<body id="app" v-cloak>
  <chart></chart>
</body>

CSS

[v-cloak]{
  //display: none; //comment me out and rerun!
}

JavaScript

console.clear()

Vue.component('chart', {
	template: '<div id="container" style="height: 300px"></div>',
    data: function() {
        return {
        	opts: {
		        chart: {
        	    	renderTo: 'container',
            		type: 'bar'
	        	},
    	    	title: {
        	    	text: 'Fruit Consumption'
	        	},
    	    	xAxis: {
        	    	categories: ['Apples', 'Bananas', 'Oranges']
	        	},
    	    	yAxis: {
        	    	title: {
            	    	text: 'Fruit eaten'
	            	}
    	    	},
        		series: [{
            		name: 'Jane',
            		data: [1, 0, 4]},
        			{
            		name: 'John',
            		data: [5, 7, 3]}]
    			}
    	    }
    },
    created: function() {
        
    },
    ready: function() {
		this.chart = new Highcharts.Chart(this.opts);    
    }
})

new Vue({
	el: '#app',
    data: {
    	chart: null
    }
})