Estoy creando un gráfico de barras simple usando vue-echart y Vue 2. Quiero mostrar un gráfico de barras de Comp1.vue dentro de mi página de inicio, App.vue.

aplicación.vue

 <template> <div id="app"> <Comp1/> </div> </template> <script> import Comp1 from './components/Comp1.vue' export default { name: 'App', components: { Comp1 } } </script> <style> </style>

principal.js

 import Vue from 'vue' import App from './App.vue' import VueECharts from "vue-echarts"; import "@vue/composition-api"; import "echarts"; Vue.config.productionTip = false Vue.component("v-chart", VueECharts); new Vue({ VueECharts, render: h => h(App), }).$mount('#app')

Comp1.vue

 <template> <div style="height: 300px;"> <v-chart :options="chartOptionsBar"></v-chart> Yes </div> </template> <script> export default { name: 'Comp1', data() { return { chartOptionsBar: { xAxis: { data: ['Latte', 'Espresso', 'Mocha', 'Cappucino'] }, yAxis: { type: 'value' }, series: [ { type: 'bar', data: [100, 50, 25, 10] } ] } } } } </script> <style scoped> </style>

He importado todas las dependencias posibles pero el gráfico no se representa. No tengo idea de cómo pudo pasar esto. ¿Cómo debo resolver esto para que el gráfico se represente?