title: How to use Vue.js in a web extension popup?
body: <p>I'm trying to develop a web extension and use Vue to style the popup but it doesn't seem to work. The code is extremely basic at the moment</p>
  
  <p>manifest.json:</p>
  
  <pre><code>{
    "manifest_version": 2,
    "name": "Web Extension",
    "description": "Web Extension",
    "version": "1.0.0",
    "browser_action": {
      "default_icon": "icons/compass.svg",
      "default_title": "Web Extension",
      "default_popup": "popup/index.html"
    },
    "permissions": ["&lt;all_urls&gt;"]
  }
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  
  &lt;title&gt;My first Vue app&lt;/title&gt;
    &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;
      {{ message }}
    &lt;/div&gt;
  
    &lt;script&gt;
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And from the image below it can be seen that the code clearly works when the page is opened in the browser however the js doesn't seem to run in the popup:</p>
  
  <p><a href="https://i.stack.imgur.com/wxLyK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wxLyK.png" alt="enter image description here"></a></p>