Framework agnostic custom element with v-model doesn't work - vue.js

Question

I am facing an issue.
I am currently working on a framework agnostic element library with the new browser API customElements.define() and created a custom input and would like him to work with v-model binding.
But, it does not work. I am able to bind a value with :value="prop" but v-model simply does not work.
class LmTag extends HTMLElement {
constructor() {
super();
this.template = document.querySelector("#lmTag");
this.shadow = this.createShadowRoot();
this.clone = document.importNode(this.template.content, true);
this.shadow.appendChild(this.clone);
this.input = this.shadow.querySelector('input');
}
connectedCallback() {
this.value = this.getAttribute("value");
}
get value() {
return this.input.value;
}
set value(value) {
this.input.value = value;
}
attributeChangedCallback(attr, oldValue, newValue) {
console.log(attr, oldValue, newValue);
}
}
customElements.define("lm-tag", LmTag);
Vue.config.productionTip = false
Vue.config.devtools = false;
new Vue({
el: '#app',
data: {
lights: true,
input: "model"
},
methods: {
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template id="lmTag">
<style>
.lm-tag {
display: inline-block;
padding: 4px;
border-radius: 4px;
background-color: #e74c3c;
color: #ffffff;
font-size: 12px;
}
.lm-tag input {
border: none;
}
</style>
<span class="lm-tag">
<input type="text"/>
<content></content>
</span>
</template>
<div id="app" class="text-center body">
<p>
Binding :value
<lm-tag :value="input">{{input}}</lm-tag>
</p>
<p>
Binding v-model
<lm-tag v-model="input">{{input}}</lm-tag>
</p>
<p>
Raw input with :value
<input type="text" :value="input">
</p>
<p>
Raw input with v-model
<input type="text" v-model="input">
</p>
</div>
Could you help a fellow dev having trouble with his code?
Thank you!