Nuxt App - Implementing search box and results in different components

Hello, I am building a Nuxt SSR app and currently have the POC running correctly with the SSR setup. I need however to break down my search page into components and have the search box living in a different component as the <ais-hits> one. I have created the following mixin that I have imported in the 2 components that need somehow to work together.
But I can’t figure out how the results returned by the search box can be passed over to the ais-hits that lives in a different place?

import { createServerRootMixin } from 'vue-instantsearch'
import _renderToString from 'vue-server-renderer/basic'
import algoliasearch from 'algoliasearch/lite'

const searchClient = algoliasearch(
  'XXXX',
  'XXXXX'
)

function renderToString(app) {
  return new Promise((resolve, reject) => {
    _renderToString(app, (err, res) => {
      if (err) reject(err)
      resolve(res)
    })
  })
}

function nuxtRouter(vueRouter) {
  return {
    read() {
      return vueRouter.currentRoute.query
    },
    write(routeState) {
      // Only push a new entry if the URL changed (avoid duplicated entries in the history)
      if (this.createURL(routeState) === this.createURL(this.read())) {
        return
      }
      vueRouter.push({
        query: routeState,
      })
    },
    createURL(routeState) {
      return vueRouter.resolve({
        query: routeState,
      }).href
    },
    onUpdate(cb) {
      if (typeof window === 'undefined') return

      this._removeAfterEach = vueRouter.afterEach(() => {
        cb(this.read())
      })

      this._onPopState = (event) => {
        const routeState = event.state
        // On initial load, the state is read from the URL without
        // update. Therefore, the state object isn't present. In this
        // case, we fallback and read the URL.
        if (!routeState) {
          cb(this.read())
        } else {
          cb(routeState)
        }
      }
      window.addEventListener('popstate', this._onPopState)
    },
    dispose() {
      if (typeof window === 'undefined') {
        return
      }
      if (this._onPopState) {
        window.removeEventListener('popstate', this._onPopState)
      }
      if (this._removeAfterEach) {
        this._removeAfterEach()
      }
    },
  }
}

export const searchMixin = {
  data() {
    const mixin = createServerRootMixin({
      searchClient,
      indexName: 'courses',
      routing: {
        router: nuxtRouter(this.$router),
      },
   
    })
    return {
      ...mixin.data(),
    }
  },
  provide() {
    return {
      // Provide the InstantSearch instance for SSR
      $_ais_ssrInstantSearchInstance: this.instantsearch,
    }
  },
  serverPrefetch() {
    return this.instantsearch
      .findResultsState({ component: this, renderToString })
      .then((algoliaState) => {
        this.$ssrContext.nuxt.algoliaState = algoliaState
      })
  },
  beforeMount() {
    const results = window.__NUXT__.algoliaState

    this.instantsearch.hydrate(results)
  },
}