足すボタンを押すと同時に日付と誰から貰ったかを入力し、グラフ下に表示させたい

現在、お小遣い帳みたいなものをjavascriptで製作しようとしています。
いつ貰ったかや誰から貰ったかなどが分かるものを足すボタンを押すと同時に入力し、グラフの下に表示できるようにしたいです。ご教授お願い致します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aiueo</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div id="app">


    <div class="col">
               <h2>お小遣い</h2>
    </div>


        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-md-6">


                    <div v-for="(item,index) in datasets" :key="index" class="row py-2">
                        <div class="col-3">
                            <input type="number" class="form-control" v-model.number="datasets[index]">
                        </div>    <font size="5" color="000000">円</font>
                        <div class="col">
                            <input type="range" class="form-control" min="0" max="999999"
                                v-model.number="datasets[index]">
                        </div>    
                        <div class="col-auto">
                            <button class="btn btn-primary" v-on:click="add(index)">足す</button>
                            <button class="btn btn-secondary" v-on:click="del(index)"
                                :disabled="datasets.length < 2">消す</button>
                        </div>
                    </div>

                </div>
                <div class="col-12 col-md-6">


                    <div class="col-12">
                        <div class="row">


                        </div>
                        <div>
                            <canvas id="charts"></canvas>

                        </div>

                    </div>
                </div>
            </div>



        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="script.js"></script>


</body>

</html>

new Vue({
    el: '#app',
    data: {
        datasets: [
            9999,9999
        ],

        graphSelected: 'pie'
    },
    watch: {
        datasets: {
            handler() {
                this.canvas.data.datasets[0].data = this.datasets;
                this.canvas.data.labels = Array(this.datasets.length).fill('');
                this.canvas.update();
            }
        },
        graphSelected: {
            handler() {
                this.canvas.destroy();
                this.chart();
            }
        }

    },
    mounted() {
        this.chart();
    },
    methods: {
        toRaw(data) {
            return JSON.stringify(data);
        },
        add(i) {
            this.datasets.splice(i, 0, this.datasets[i]);

        },
        del(i) {
            if (this.datasets.length > 1) {
                this.datasets.splice(i, 1);
            }
        },
        chart() {
            var vm = this;
            var ctx = document.getElementById("charts");
            vm.canvas = new Chart(ctx, {
                type: vm.graphSelected,

                data: {
                    labels: Array(vm.datasets.length).fill(''),
                    datasets: [{
                        label: 'グラフ',
                        backgroundColor: '#20B2AA',
                        data: vm.datasets
                    }]
                }
            });


        },
    }
})