Cannot read property of undefined when trying to use $store.getters in vue3 + vuex4 + typescript

Question

I have a project using vue 3, vuex 4, and typescript. In this project i have a getter called getColor1:

export const getters: GetterTree<AnimationCanvasState, RootState> = {
  getFrames(state): Array<Frame> {
    return state.frames
  },
  getColor1(state): number {
    return state.color1
  },
}

The getters are imported into a module's state:

import { Module } from 'vuex'
import { RootState } from '../../types'
import { getters } from './getters'
...
import { AnimationCanvasState } from './types'

const state: AnimationCanvasState = {
  color1: 0,
...
}

export const animationCanvas: Module<AnimationCanvasState, RootState> = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
}

Which is in turn imported into the root store:

import { createStore, StoreOptions } from 'vuex'
import { RootState } from './types'
import { animationCanvas } from '@/store/modules/animation-canvas'

const store: StoreOptions<RootState> = {
  modules: {
    animationCanvas,
  },
}

export default createStore(store)

The issue that I'm running into is that if I try to refer to the getter via the this.$store... approach in a computed property:

computed: {
    color1: {
        get(): number {
            return this.$store.getters.animationCanvas.getColor1;
        },
        set(value) {},
    },
},

I get the error:

Cannot read property 'getColor1' of undefined

The thing is, if I use the mapGetters tool, the getColor1 getter works fine:

computed: {
    ...mapGetters('animationCanvas', ['getColor1']),
    color1: {
        get(): number {
            return this.getColor1;
        },
        set(value) {},
    },
},

And even weirder, if I stop my code in the get for the computed property and drill into the getters by hand in the console I can see the getColor1 getter along with all of the other namespaced getters in the this.$store.getters object, but when I try to access them I get an error:

I know I can just use mapGetters, but I keep running into little snags like this that make me feel like I have something wrong with my setup.

Does anyone know why this is happening?

UPDATE

As I reviewed my question I realized that with the this.$store approach, the namespace and getter are a single property value that I was conflating with a structured path. If I use the key access approach to the property it works:

this.$store.getters['animationCanvas/getColor1']

But is this how namespaced modules are supposed to work in vuex?