chrome addon VueJS element disappears when rendered

Question

I have a successfully running developer mode addon that works in Chrome.

I would like a button on the page running Vue (which I've used for years). Here is my code:

    let isletCtl = document.createElement('div')
    isletCtl.id = "islet-ctl"
    isletCtl.innerText = 'isletCtl: '

    let isletVue = document.createElement('div')
    isletVue.id = 'islet-vue'
    isletVue.innerText = 'isletVue: {{ response }}'
    isletCtl.appendChild(isletVue)
    document.body.appendChild(isletCtl)

    window.setTimeout(function(){
        new Vue({
            el: "#islet-vue",
            data: function(){
                return {response: 'hello vue'}
            }
        })
    }, 25000)

The 25s delay was just to figure out what is going on. the button renders just fine, but when the Vue({ ... }) piece renders, the #islet-vue div just disappears from the DOM!

Anyone have an answer as to why this is happening?

EDIT: here is a screenshot of the chrome inspector. Interestingly a comment is added, but the actual div#islet-vue element just goes away.

EDIT 2: here is my manifest.json:

{
    "name" : " XXX",
    "version": "0.0.3",
    "manifest_version": 3,
    "description" : "Simple secure plugin to convert Jira-like text in Slack..",
    "content_scripts" : [
        {
            "js" : ["js/vue-2.1.6.min.js","tools.js", "common.js", "app.slack.com.v2.js"],
            "css": ["app.slack.com.css"],
            "matches" : ["https://app.slack.com/client/*"]
        },
        {
            "js" : ["tools.js","common.js","develop/localhost.43000.js"],
            "css": ["develop/localhost.43000.css"],
            "matches" : ["http://localhost:43000/*"]
        }
    ],
    "action": {
        "browser_style": true,
        "default_title": "X Islet CORS popup",
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "bookmarks",
        "storage"
    ],
    "host_permissions": [
        "http://localhost:8080/",
        "http://localhost:43000/",
        "http://52.117.30.181/*"
    ]
}

Answer 1

It looks like the issue is that Vue doesn't have permission to work on a string on the page from an addon. The solution would be to add a render function on your Vue instance

new Vue({
    el: "#islet-vue",
    render: function(createElement) {
        return createElement('div', {}, this.message)
    },
    data: function() {
        return {
            response: 'hello vue'
        }
    }
})

It might have to do with how you import vue, so I would use webpack (or browserify), which takes away a lot of the hassle in importing external packages.