Estaba tratando de implementar un gráfico de barras simple usando Vue y Chart.js. Pero cuando trato de ejecutar el proyecto me sale:

TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'getSelected') en popup.js:7:13

salida de la consola

Aplicación.vue:

 <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

HolaMundo.vue:

 <template> <div class="hello"> <h1>{{ msg }}</h1> <canvas id="myChart" width="400" height="400"></canvas> </div> </template> <script> import Chart from 'chart.js/auto'; export default { name: 'HelloWorld', props: { msg: String }, mounted () { console.log('Component mounted'); const ctx = document.getElementById('myChart'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); myChart; } } </script>

principal.js

 import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')

error en la pantalla de la consola. Lo he investigado pero no pude encontrar la solución adecuada. ¿Podrías ayudarme?