chartjs-plugin-colorschemes | Predefined color schemes for Chart.js | Theme library

I've got a doughnut chart being displayed using vue-chartjs and am supplying color schemes via chartjs-plugin-colorschemes.

I'm working on the ability for the user to switch out color schemes and persist their chosen scheme to the db, however I've run into an odd issue. When adding a colors array to the options that are being supplied to the Vuetify select, it breaks the chart from updating to the new color scheme. I've narrowed it down to this specifically, because if I remove the colors array from options, it correctly updates the chart (however then I'm not able to display the colors like I'm trying to do in the select dropdown).

Why would adding properties to the Vuetify select break this functionality? Is it because they're being dynamically generated?

**ParentComponent.vue:**lang-vue

I am using vue-chartjs and chartjs-plugin-colorschemes to style a doughnut graph. I'm trying to allow the user to choose from a select which theme they prefer. I have it 90% working; the user can select a theme, hit update, and the doughnut plus its label correctly change color. What doesn't work though, is on initial page load, the doughnut has a color scheme but the legend does not.

I am currently passing a default theme down as props, and I am using a watch method to watch for changes to the theme. The error occurs inside of this watch method.

How can I dynamically update the legend label colors? Here is a minimal example of my component:

I am new to React.js, and so far, I am loving it. I am still confused on the concept of stateful components, although. I am using Bootstrap tables to build my table, and my GET request for its data grab worked flawlessly. I am using the material-ui lib for my switch component as well (no need to reinvent the wheel here!)

Although, I am now trying to integrate a new column that will be a switch for each row in my table, and that, when toggled, changes the boolean of said switch to true/false, which will then send a PUT request down to my backend. I have not built my PUT request yet, as I cannot get this UI portion functioning. Here is my code so far, and the dumby UI works, but I don't know how to integrate the stateful render I defined in NodeTableContainer at and SwitchState(), into my definition at selectionRenderer: Switches in my NodeTable component. The stateful render does render a toggle switch under the table, essentially as its own independent component. But I want to integrate that toggle switch component in const selectRow = {mode: 'checkbox', clickToSelect: true,selectionRenderer: Switches}. Here is my code, and I hope my I have explained my issue well. I have Googled endlessly, but I believe my own ignorance has blocked my from discovering the answer I need.

Table Component (NodeTable)