Vue/Vuex: Two-way Computed Property - undefined is not an object on reload

Question

I am creating a form where the data comes from an external api and is stored in Vuex . I implemented the Two-way Computed Property like in the official Vuex Documentation

<template>
    <form>
          <div v-if="email">
            <label for="email">E-Mail</label>
            <input v-model="email" type="email" id="email">
          </div>
    </form>
</template>

<script>
export default {
  computed: {
    email: {
      get() {
        return this.$store.state.shop.customer.customer.email;
      },
      set(value) {
        this.$store.commit('shop/customer/updateEmail', value);
      }
    },
  }
}
</script>

everything works fine, when I visit the component via routing. But if I reload the page, I get the error:

undefined is not an object (evaluating 'this.$store.state.shop.customer.customer.email')

From other threads I've read, that the problem is, that the computed property is null on reload . But after implementing the v-if directive I am still getting this error. I think I would need to find a way, that the property is not null, like a fallback, where it returns an empty string.

VueX Store:

export const state = () => ({
  customer: {},
})

export const getters = {
  customer: state => state.customer,
}

export const mutations = {
  updateEmail(state, email) {
    state.customer.email = email;
  },
}

Answer 1

You should initialize email property in your state with an empty string in order to be defined at the initial load:

export const state = () => ({
  customer: { email : ""},
})