페이지의 장바구니 담기 기능 관련 오류

<template>
    <div>
    <div class="container">
      <div class="main-panel">
        <img
          class="product-image"
          :src="product.imageUrl"
          :alt="product.name"
        />
      </div>
      <div class="side-panel">
        <p class="name">{{ product.name }}</p>
        <p class="price">{{ product.price }}</p>
        <button type="button" @click="addToCart">Add to Cart</button> 
      </div>
    </div>
  </div>
</template>

<script>
import {fetchProductById} from '@/api/index'

export default {
    async asyncData({ params }) {
        const response = await fetchProductById(params.id);
        const product = response.data
        return{ product }
    },
    methods: {
      addToCart() {
        this.$store.commit('addCartItem',this.product);
        this.$router.push('/cart')
        console.log("hi success")
      }
    }
    
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}
.product-image {
  width: 500px;
  height: 375px;
}
.side-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 220px;
  text-align: center;
  padding: 0 1rem;
}
</style>

export const state= () => ({
    cartItems: [''],
})

export const mutations = {
    addCartItem(state, cartItem) {
        state.cartItems.push(cartItem)
    },
}

코드를 다음과 같이 작성했는데 강의처럼 addCartItem이 안나옵니다.