Nested components with v-model

LocationInput.vue

<template>
  <b-autocomplete
    v-bind="$attrs"
    :data="features"
    :loading="isLoading"
    field="properties.name"
    keep-first
    @typing="search"
    @select="option => selected = option"
  >
    <template #default="{ option }">
      <div>{{ option.properties.name }}</div>
    </template>
  </b-autocomplete>
</template>

<script>
import debounce from 'lodash/debounce'

export default {
  data () {
    return {
      features: [],
      selected: null,
      isLoading: false
    }
  },
  methods: {
    search: debounce(async function (query) {
      if (!query.length) {
        this.features = []
        return
      }

      this.isLoading = true
      const url = '/traveltime/geocoding/search'
      const params = { query }
      try {
        const data = await this.$axios.$get(url, { params })
        this.features = data.features
      } catch (error) {
        this.features = []
        throw error
      }
      this.isLoading = false
    }, 500)
  }
}
</script>

Search.vue

<template>
  <main class="container">
    <fieldset>
      <form>
        <b-field label="Your location">
          <LocationInput
            v-model="yourLocation"
            name="yourLocation"
            icon="map-marker"
          />
        </b-field>

        <b-field label="Their location">
          <LocationInput
            v-model="theirLocation"
            name="theirLocation"
            icon="map-marker"
          />
        </b-field>
      </form>
    </fieldset>
  </main>
</template>

<script>
import LocationInput from '@/components/LocationInput'

export default {
  name: 'SearchPage',
  components: {
    LocationInput
  },
  data () {
    return {
      yourLocation: {},
      theirLocation: {}
    }
  }
}
</script>