I'm following a tutorial to create an eCommerce website using Vue Router and Vuex. When I do this.cart = this.$store.state.cart in different components, the cart variables seem to have the same object reference since the total item count in each component updates whenever it is changed in the other component even though no mutation has been committed (check the linked/timestamped video for demonstration). Is this the case here? I know that objects are passed by reference in JS but Vuex stores cannot be changed directly without committing a mutation, which would make it seem like the object is being duplicated in the background whenever the store is accessed.

The two relevant components are a navbar displaying how many items are in the cart, and a more detailed Cart.vue component, both of which use Vuex to access the cart's state by assigning this.cart = this.$store.state.cart on the mounted lifecycle hook. The navbar in App.vue looks like this (details omitted):

<template>
  <div>
    ... Cart link in navbar
    <span>Cart ({{ cartTotalLength }})</span>
    ...
  </div>
</template>

<script>
export default {
  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>

The Cart.vue component is similar (it also sets an instance variable for cart on the mounted lifecycle hook), though it displays a more detailed view of cart contents and has buttons to change the quantity of items per product (not shown below):

<template>
  ... Cart Summary
    {{ cartTotalLength }} items
  ...
</template>

<script>
export default {
  name: 'Cart',
  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)
    }
  },
  methods: {
    incrementQuantity(item) {
      cart.item.quantity += 1
    }
    ...
  }
}
</script>

Why does the item count in the navbar get updated when the item count is updated in Cart.vue through the incrementQuantity method when no mutation is committed? Does this.$store.state.cart reference the same object every time it is used even though in separate components?