Vue: mounted changed value not passed to component

Question

This is my Vue main file:

export default {
    name: 'app',
    components: {
        FormSelector,
    },
    data () {
        return {
            headerInfo: {
                issue: '',
                model: 'model-1'
            }
        }
    },
    mounted () {
        this.headerInfo = JSON.parse(localStorage.getItem('header'))
    },
    methods: {
        selectModel (model) {
            this.headerInfo.model = model
        },
    }
}

And this is how I call the component:

<FormSelector @select="selectModel" v-bind:model="headerInfo.model"/>

On component file, this is the script:

export default {
    name: 'FormSelector',
    props: ['model'],
    data () {
        return {
            select: this.model,
        }
    },
    methods: {
        changeModel (e) {
            const model = (e.target.value)
            this.$emit('select', model)
        }
    }
}

My question is: how can I change select data value when mounted cycle load headerInfo data from localStorage?

At this time, only headerInfo data on main file is changed.

Answer 1

Change method mounted add async and await.

async mounted () {
  this.headerInfo = await JSON.parse(localStorage.getItem('header'))
}