Vue.js passing a variable through a modal

Question

I am trying to pass a variable from a Parent (page) component to a Child (modal) component. After reading a few examples, this works fine. The variable in question is brought in from another component as a route param. If i refresh the page, the variable is lost and can no longer be passed to the child. My question is, is the best way to persist this using the store, or is it possible to persist another way if the user refreshed? Any help would be appreciated

Parent

  <b-container>
    <Modal v-show="displayModal" @close="closeModal">
      <template v-slot:body>
        <ExpressionCreate v-show="displayModal" :lender-id="lenderId" @close="closeModal"/>
      </template>
    </Modal>
    <div class="card" style="width: 100%;">
      <div class="card-header">
        <h5>{{this.lenderName}}</h5>
        <b-alert :show="this.loading" variant="info">Loading...</b-alert>
      </div>
      <b-btn block variant="success" @click="showCreateLenderModal">Add Expression</b-btn>

....


  created () {
    this.lenderId = this.$route.params.lenderId

...

    navigate () {
      router.go(-1)
    },
    showCreateLenderModal () {
      this.displayModal = true
    },
    toggleDisplayModal (isShow) {
      this.displayModal = isShow
    },
    async closeModal () {
      this.displayModal = false
    }

Child

   <label>lender id:</label>{{this.lenderId}}

...

  props: {
    lenderId: {
      type: Number
    }
  },

Answer 1

You can use VueSession to persist.

Simply persist your lender_id with

this.$session.set('lender_id', this.lender_id)

and you can get it later as

saved_lender = this.$session.get('lender_id')
if (saved_lender) {
    // handle saved case here
}