Vue 2 Standalone Component and Shadow DOM Confusion

Question

I need to insert my component into a shadow DOM on a webpage that I have no control over.

All I have access to on the webpage is the following div:

  <div id="freshie">
    <compo></compo>
  </div>

I have a Vue 2 component with a template that I've defined like this:

Vue.component('compo', {
  delimiters: ['${', '}'],
  data: function () {
    return {
      someData: "hi"
    }
  },
  template: 
  `
  <div>
    <p>If this works I'll be amazed</p>
  </div>
  `
})

I'm trying to create a shadow DOM with the following:

let treeHead = document.querySelector("#freshie"); #this selects the div on the webpage
let holder   = document.createElement("div"); #I thought this selects my component??
let shadow   = treeHead.attachShadow({mode: 'open'}); #this sets up the shadow????
shadow.appendChild(holder); #this places the shadow??

let vueFresh = new Vue({
  el: holder,
});

But this does basically nothing, no errors, no component. So I've got something wrong I just have no clue what that is.. Any ideas?

I can insert this component on the webpage, with the following code, no problem. However it inherits all the CSS from the webpage and everything is jacked.

var vueFreshie = new Vue({ el: '#freshie' })