How to access the app object from a Vue single file component?

My end goal: I'm using a custom HTML element in a component template (<gcse:searchresults-only>) and I'd like to register the element with Vue. The method given by that page for registering custom elements is through app.config.compilerOptions.isCustomElement.

But I'm using a single file component and the global app object is not defined. Is there a way to obtain it? Or is there an alternative way to set config options from within a single file component?

Do I need to set it from outside this component? I figured that since I'm only using this custom element here, it makes sense for only this file to have to know about it instead of managing it in some global context.

In case it matters, I'm actually doing this within Gridsome.

This is how we do it (like in the docs). I think it's fine to make it globally available as it will also have a bunch of ESLint warnings, etc

vue.config.js

module.exports = {
  chainWebpack: config => {
    // ignore errors about external custom html elements
    config.module.rule('vue').use('vue-loader').tap(options => ({
      ...options,
      compilerOptions: {
        isCustomElement: tag => tag === 'gcse:searchresults-only',
      },
    }));
  },
};