Why Vue.js instance doesn't work in Firefox Extension Development?

Manifest.json:

{

  "manifest_version": 2,
  "name": "Vue",
  "version": "1.0",

  "description": "Vue Test",

  "icons": {
    "96": "icons/icon.png"
  },

  "permissions": [
    "tabs"
  ],

  "background": {
    "scripts": ["background.js"]
  },
  
  "browser_action": {
    "default_icon": "icons/icon.png",
    "default_title": "Vue"
  }
}

background.js:

browser.browserAction.onClicked.addListener(()=>{
    browser.tabs.create({url: 'index.html'})
       .then(()=>browser.tabs.executeScript({file: "index.js"}))
       .then(()=>browser.tabs.executeScript({file: "vue.js"}))
})

index.html:

<!DOCTYPE html>
<html>

<head>
    <title>Vue</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css"/>
</head>

<body>

    <div id="app">{{msg}}</div>
    
    <script src="vue.js"></script>
    <script src="index.js"></script>
</body>

</html>

vue.js: the vue.js itself downloaded from vue page

index.js:

let app = new Vue({
  el: '#app',
  data: {
    msg: 'hi'
  }
})

The problem: nothing is been rendered on screen. If I get the same index.html and open it directly on browser, it will render the message 'hi'. What I'm missing?

Solution

First, vue.js and index.js aren't required to import again in the index.html file as it is already injected/executed from background.js.

Second, in background.js, vue.js should be executed first (For VueJS to be ready to initialize the main application later on) and we should actually wait until it is finished executing before proceeding on with index.js.

So, in conclusion, background.js should be something like this:

browser.browserAction.onClicked.addListener(async ()=>{
   await browser.tabs.create({url: 'index.html'});
   await browser.tabs.executeScript({file: "vue.js"});
   await browser.tabs.executeScript({file: "index.js"});
});

And remove

    <script src="vue.js"></script>
    <script src="index.js"></script>

from index.html