Dynamic swapping of chart.js

I was trying to experiment with making a chart builder. As an example, when the page loads, by default a line chart shows. But the first option in the form is to choose a chart type. If something other than the line chart is chosen, we remove the line chart, and re-render the default chart with the new chart type.

However, nothing changes when I do this. The line chart remains even though I destroy() the chart, change it's type, then re-create it. My next attempt was going to be to destroy the child <defaultchart> component, then re-add it with the new type, but not sure how to do that.

Here's what I have currently that deletes the chart correctly, but then just re-adds the line chart right back instead of showing me a bar chart.

        data() {
            return {
                ourChart: '',
                chartConfig: {
                    type: this.currentChartType,
                    data: {
                        labels: this.labels,
                        datasets: [{
                            label: 'Some Label',
                            data: this.values
                        }]
                    },
                    options: {
                        responsive: true
                    }
                }
            };
        },
         ready() {
            this.drawChart();           
        },

        methods: {

            drawChart: function() {
                var context = this.$els.canvas.getContext('2d');
                
                console.log('type: ' + this.chartConfig.type);  
                this.ourChart = new Chart(context, this.chartConfig);
                this.ourChart.update();
            }

        },

        events: {
            'chart-type-changed': function(chartType) {
                                console.log(chartType); //prints "bar" to the console
                this.currentChartType = chartType;
                this.chartConfig.type = chartType;

                this.ourChart.destroy();
                this.drawChart(); //just creates another line chart
            }
        }

And here is my parent component, chartconfig. defaultchart is what holds the data above. When a select box holding chart type is selected in the chartconfigform, and event is fired that goes up to chartconfig and down to defaultchart letting it know what kind of chart to change to.

<!-- chart widget preview -->
        <div class="col-sm-6">
            <defaultchart
                :current-chart-type.sync="chartType"
                :labels="['January', 'February', 'March']"
                :values="[30, 22, 80]"
            >
            </defaultchart>
        </div>
        <!-- 3rd party data source list -->
        <div class="col-sm-6">
            <chartconfigform 
                :data-source="dataSource" 
                :current-chart-type.sync="chartType"
            >
            </chartconfigform>
        </div>