How to use data-binding in vue-chartjs.

[torish14]

Expected Behavior

Create five forms, enter a label name for each, and click the Execute button to create a radar-chart according to the label names.
For the data, 100, 90, 80, 70, and 60 are specified in advance from the first label.

Actual Behavior

Entering a label name in each form and clicking the execute button does not create a chart.

Applicable source code

import { Radar, mixins } from 'vue-chartjs'

const { reactiveProp } = mixins

export default {
  name: 'RadarChart',
  extends: Radar,
  mixins: [reactiveProp],
  props: {
    chartData: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted () {    
    this.renderChart(this.chartData, this.options)
  }
}

<template>
    <div class="radar">
      <radar-chart
        :chart-data="chartData"
        :options="options"
        :bind="true"
        :labels="labels"
      />
    </div>
    <div class="form">
      <h3>Input form</h3>
      <form @submit.prevent="addData()">
        <div class="separate">
          <table>
            <tbody>
              <tr>
                <td><input v-model="label1" class="first" type="text" placeholder="first"></td>
                <td><input v-model="label2" class="second" type="text" placeholder="second"></td>
                <td><input v-model="label3" class="third" type="text" placeholder="third"></td>
                <td><input v-model="label4" class="forth" type="text" placeholder="forth"></td>
                <td><input v-model="label5" class="fifth" type="text" placeholder="fifth"></td>
              </tr></tr>
            </tbody>
          </table>
        </div>
        <div class="button">
          <button type="submit">
            submit
          </button>
        </div>
      </form>
  </div>
</template>

<script>
import RadarChart from './RadarChart.js'

export const chartData = {}

export default {
  components: {
    RadarChart
  },
  data () {
    return {
      chartData: {
        labels: [this.label1, this.label2, this.label3, this.label4, this.label5],
        datasets: [
          {
            backgroundColor: 'rgba(255, 204, 0, 0.4)', 
            borderColor: 'rgba(255, 204, 0, 1)', 
            pointBackgroundColor: 'rgba(255, 204, 0, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff', 
            pointHoverBorderColor: 'rgba(255, 204, 0, 1)', 
            data: [100, 90, 80, 70, 60],
            fill: true,
            pointHitRadius: 20,
            pointStyle: 'circle',
            pointRadius: 2
          }
        ]
      },
      options: {
        legend: {
          display: false,
          labels: {
            fontSize: 14
          }
        },
        scale: {
          pointLabels: {
            fontSize: 14
          },
          ticks: {
            min: 0,
            max: 100,
            stepSize: 20,
            fontSize: 0
          },
          angleLines: {
            display: true,
            color: 'gray'
          },
          gridLines: {
            display: true,
            color: 'gray'
          }
        }
      }
    }
  },
  methods: {
    addData () {
      for (const key in chartData.labels) {
        console.log(key)
      }
    }
  }
}
</script>

Environment

• vue.js version: <3.12.1>
• vue-chartjs version: <3.5.0>
• yarn version: <1.21.1>