Vue.js/Vuetify 3 - Changing theme produces 'Cannot assign to 'name' because it is a read-only property' error

Question

I'm trying to toggle my vuetify 3 theme between light mode and dark using a button.

It seems the Vuetify documentation sets the theme using theme.global.name but this does not work as it is a readonly property.

Is there a work around this?

Here's a snippet of my code below:

<script lang="ts">
import { useTheme } from 'vuetify'

export default {
  data() {
    return {
      theme: useTheme()
    }
  },
  methods: {
    toggleTheme() {
      this.theme.global.name = this.theme.global.current.dark ? 'light' : 'dark'
    }
  }
}
</script>

This is the error message produced: Cannot assign to 'name' because it is a read-only property.ts(2540)