vue-custom-element + shadowDOM + Vuetify producing [Vuetify] Unable to locate target [data-app]

I'm trying to create a Vue widget that can be used on other websites. I've got the whole thing working but the last step of mounting it underneath a shadowDOM just doesn't seem to be working.

I'm using this library: https://github.com/karol-f/vue-custom-element#shadowdom-example

And have followed this to get shadowDOM working: https://github.com/bryanvaz/vue-custom-element-shadow-examples

This is what I'm seeing:

This is what the DOM looks like:

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import vuetify from './plugins/vuetify'
import vueCustomElement from 'vue-custom-element'
import 'document-register-element/build/document-register-element'

Vue.use(vueCustomElement)
Vue.config.productionTip = false
Vue.prototype.$axios = axios

axios.defaults.baseURL = process.env.VUE_APP_AXIOS_BASE_URL
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*'
axios.defaults.withCredentials = true

App.store = axios
App.store = store
App.router = router
App.vuetify = vuetify

const options = {};
options.props = ['id'];

// Enable shadow root for production build

options.shadow = true;
options.beforeCreateVueInstance = (root) => {
    const rootNode = root.el.getRootNode();
    if (rootNode instanceof ShadowRoot) {
        root.shadowRoot = rootNode;
    } else {
        root.shadowRoot = document.head;
    }
    return root;
};

Vue.customElement('boodil-widget', App, options);

App.vue

<template>
  <!-- <v-app v-if="id"> -->
  <v-app>
      <Home :id="id" data-app></Home>
    <!-- <router-view/> -->
  </v-app>
</template>

<script>
import Home from "@/views/Home.vue";

export default {
  props: ["id"],

  components: {
    Home,
  },

  //   data: () => ({
  //     //
  //   }),
};
</script>

Home.vue (Not the entire file but how it starts off)

<template>
  <v-container fluid>
    <!-- Dialog -->
    <v-dialog
      v-if="transaction && banks"
      v-model="isActive"
      width="570"
      persistent
    >
      <v-card color="#3b3e44" dark>
        <v-toolbar dark color="#3b3e44" :elevation="0" dense>
          <v-spacer></v-spacer>
          <v-btn icon dark @click="closeDialog" class="mt-2" color="#fffff">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-toolbar>