Vue.js 未捕获（承诺中）类型错误：无法读取属性'；长度'；使用Vuejs在chartjs中定义未定义的

我正在尝试在我的应用程序中显示特定的图表。vue来自Charts.vue，以下是我尝试实现的目标：

图表.vue

<template>
  <div class="chart-container">
    <canvas :ref="`chart${chartId}`"></canvas>
  </div>
</template>

<script>
export default {
  props: {
    chartId: {
      type: String,
      required: true
    }
  } 

  ....

}
</script>

<template>
  <div class="content-1">
    <chart :chartId="1" />  <-- Here i want to display my chart 1
  </div>

  ....

  <div class="content-8">
    <chart :chartId="8" />  <-- Here i want to display my chart 2
  </div>
</template>

<script>
import chart from './Charts'
export default{
  name: 'App',
  component: {charts}

    ....

}

导出默认值{
道具：{
沙特德：{
类型：字符串，
必填项：true
}
} 
....
}

App.vue

<template>
  <div class="chart-container">
    <canvas :ref="`chart${chartId}`"></canvas>
  </div>
</template>

<script>
export default {
  props: {
    chartId: {
      type: String,
      required: true
    }
  } 

  ....

}
</script>

<template>
  <div class="content-1">
    <chart :chartId="1" />  <-- Here i want to display my chart 1
  </div>

  ....

  <div class="content-8">
    <chart :chartId="8" />  <-- Here i want to display my chart 2
  </div>
</template>

<script>
import chart from './Charts'
export default{
  name: 'App',
  component: {charts}

    ....

}

这不就是打字错误吗您正在导入“图表”，但将其用作“图表”。
这是miss提出的，我已更新了我的问题，尽管我收到了相同的错误