Unhandled error during execution of render function in Vue.js

Question

I have this error in my code. I haven't been able to sort it for hours now. Help please. The error originates from this 2 files and I think the error comes from the code below. In the console the error looks like this

runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Unhandled error during execution of render function 
  at <CartItem key=1 initialItem= {product: {…}, quantity: '200.00'}product: {id: 1, name: 'Burger', get_absolute_url: '/summer/burger/', description: 'The yummiest burger ever', price: '200.00', …}quantity: "200.00"[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__() > 
  at <Cart onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…}[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false > > 
  at <RouterView> 
  at <App>

Everything else works perfectly except for the cart the code for cart.vue is :

<template>
    <div class="page-cart">
        <div class="columns is-multiline">
            <div class="column is-12">
                <h1 class="title">Cart</h1>
            </div>
            <div class="column is-12 box">
                <table class="table is-fullwidth" v-if="cartTotalLength">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Price</th>
                            <th>Quantity</th>
                            <th>Total</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <CartItem 
                            v-for="item in cart.items" 
                            v-bind:key="item.product.id" 
                            v-bind:initialItem="item" />
                    </tbody>
                </table>

                <p v-else>Are you gonna stay hungry?...</p>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import CartItem from '@/components/CartItem.vue'

export default {
    name: 'Cart',
    components: {
        CartItem
    },
    data() {
        return {
            cart: {
                items: []
            }
        }
    },
    mounted() {
        this.cart = this.$store.state.cart
    },
    computed: {
        cartTotalLength() {
            return this.cart.items.reduce((acc, curVal) => {
                return acc += curVal.quantity
            }, 0)
        }
    }
}
</script>

Then I have made a component called the CartItem.vue :

<template>
    <tr>
        <td><router-link :to="item.product.get_absolute_url">{{ item.product.name }}</router-link></td>
        <td>Ksh{{ item.product.price }}</td>
        <td>
            {{ item.quantity }}
        </td>
        <td>Ksh{{ getItemTotal(item).toFixed(2) }}</td>
        <td><button class="delete"></button></td>
    </tr>
</template>

<script>
export default {
    name: 'CartItem',
    props: {
        initialItem: Object
    },
    data() {
        return {
            item: this.initialItem
        }
    },
    methods: {
        getItemTotal(item) {
            return item.quantity = item.product.price
        },
    }
}
</script>