VueJS Component Value binding with BootstrapVue Component

Question

I am working on a laravel project which using VueJS as a front end framework but I am pretty new to vueJs. Currently, I have a component called DatePicker from bootstrapVue looks like this:

<template>
  <div>
    <label for="example-datepicker">Choose a date</label>
    <b-form-datepicker id="example-datepicker" v-model="value" class="mb-2"></b-form-datepicker>
    <p>Value: '{{ value }}'</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      }
    }
  }
</script>

and I wanted to import it into multiple vue.js forms that are in separate vue files.

But there is one thing I don't know how to achieve, when I import the date picker component in the files, when I submit the form, how can I submit the value user input in the date picker also? Since the data is passed to the date-picker component not store in the file, is there any way that I can sync the date component value with the form file value?