Dynamic theme primary color change in theme Vue 3

[parisdafermos]

Was trying to find a way to change the primary color of the theme using a color-picker like so:
In my main.ts file where the theme is defined

const myTheme: ThemeDefinition = reactive({
  dark: true,
  colors: {
    primary: '#E9476F'
  }
})

app.provide('myTheme', myTheme)

In my component:

<v-color-picker v-model="color" mode="hexa" />

watch(color, (newColor) => {
  theme.themes.value.myTheme = {
    ...theme.themes.value.myTheme,
    colors: {
      ...theme.themes.value.myTheme.colors,
      primary: newColor
    }
  }
  theme.current.value = 'myTheme'
})

This does seem to work, however I get the following TS warning Cannot assign to value because it is a read-only property. and in the console I get Write operation failed: computed value is readonly.
I tried going through the docs but couldn't find anything relevant with Vuetify 3 and Vue 3, any help would be appreciated

[KaelWD]

https://vuetifyjs.com/en/features/theme/#theme-object-structure

current is readonly and not a string, you want global.name

[parisdafermos]

Thank you for the prompt response Kael, and apologies I missed that bit from the docs :)