Chartjs-Chartjs in Vue integrate parsed Json Data

can you try this:

const Chart = require('chart.js');
  import planetChartData from './chart-data.js';
  
  export default {
    name: 'App',
    components: {
    },
    data() {
      return {
        planetChartData: planetChartData,
      }
    },
    mounted() { //                     vvv use spread operator here below
      this.createChart('planet-chart', ...this.planetChartData);
    },
    methods: {
      createChart(chartId, chartData) {
        const ctx = document.getElementById(chartId);
        const myChart = new Chart(ctx, {
          type: chartData.type,
          data: chartData.data,
          options: chartData.options,
        });
      }
  }
  }

and your chart-data.js should look like this for a decent export:
i am initializing a const for declaration of planetChartData

const planetChartData = {
  type: "line",
  data: {
    labels: ["Afghanistan", "Somalia", "Nigeria"],
    datasets: [
      {
        // one line graph
        label: "Number of Moons",
        data: [300, 75, 468],
        backgroundColor: [
          "rgba(54,73,93,.5)" // Blue
        ],
        borderColor: ["#36495d"],
        borderWidth: 3
      },
      {
        // another line graph
        label: "Planet Mass (x1,000 km)",
        data: [4.8, 12.1, 12.7, 6.7, 139.8, 116.4, 50.7, 49.2],
        backgroundColor: [
          "rgba(71, 183,132,.5)" // Green
        ],
        borderColor: ["#47b784"],
        borderWidth: 3
      }
    ]
  },
  options: {
    responsive: true,
    lineTension: 1,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
            padding: 25
          }
        }
      ]
    }
  }
};

export default planetChartData;