I've been learning vuex for the last few days and am stuck on getting getters to render on my page. In my store folder inside fruits.js file I have a simple array of objects and am trying to add a filter using getters and render the results in a list. When I check vuex in the vue dev tools it is showing the getter filter with the correct results but when I try and render on the page I'm getting this error:

Cannot read properties of undefined (reading 'getYellowFruit')

<template>
  <div class="getters-page">
    <div class="container text-white">  
    <ul class="w-2/4 pt-10">
      <li v-for="yellow in yellowFruit" :key="yellow">{{ fruit.name }}</li>
    </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  computed: {
    yellowFruit() {
      return this.$store.getters.fruits.getYellowFruit
    },
  },
}
</script>

fruits.js in store folder:

export const state = () => ({
  fruits: [
    { name: 'Apple', color: 'red' },
    { name: 'Orange', color: 'orange' },
    { name: 'Pineapple', color: 'yellow' },
    { name: 'Kiwi', color: 'green' },
    { name: 'Grapes', color: 'purple' },
    { name: 'Banana', color: 'yellow' },
  ],
})

export const mutations = {}

export const actions = {}

export const getters = {
  getYellowFruit: (state) => {
    return state.fruits.filter((fruit) => fruit.color === 'yellow')
  },
}