title: changing values in .vue file of Vue JS project not working
body: <p>I have found a tool called XLSX to JSON on github, which has been made using vuejs/sheetjs. <a href="https://github.com/KinoAR/xlsx-to-json" rel="nofollow noreferrer">git repo</a>, This tool is available online via an interface - but recently it seems to have broken and I cant download my converted json file. </p>
  
  <p>Therefore my intention was to clone the repo, and change some bits around to fix it (just console json file instead of DL).</p>
  
  <p>I haven't used Vue js before. After looking through the index and the origins of the functions I saw that the whole page seems to be reliant on this app.vue file. However - when editing the values and reloading the webpage - theres no change what so ever! </p>
  
  <p><strong>App.vue:</strong></p>
  
  <pre><code>  &lt;template&gt;
    &lt;div class="col"&gt;
      &lt;div class="row"&gt;
        &lt;div id="dropZone" v-on:drop.prevent="parseXLSX($event)" v-on:dragend="cleanup" ondragenter="event.preventDefault();" ondragover="event.preventDefault(); event.dataTransfer.dropEffect='copy'" class="col drop-box"&gt;
          &lt;h2 class="text-center"&gt; Drag your xlsx file here.&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;input type='file' id='inputFile' v-on:change="parseXLSX($event.target.files)"&gt;
        &lt;div v-if="hasDownload"&gt;
          &lt;a id="download"&gt; Download Localalization JSON &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;   
      &lt;div class="row"&gt;
        &lt;div class="col json-box"&gt;
          &lt;h2 class="text-center"&gt; JSON Output&lt;/h2&gt;
          &lt;pre id="output"&gt; &lt;/pre&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;xlsx-footer&gt;&lt;/xlsx-footer&gt;
    &lt;/div&gt; 
  &lt;/template&gt;
  
  
  &lt;script&gt;
  import Footer from './components/footer.vue';
  export default {
    data() {
      return {
        hasDownload: false,
      }
    },
    methods: {
      parseXLSX(event) {
        const XLSX = window.XLSX;
        let file = this.getFile(event);
        let workBook = null;
        let jsonData = null;
  
        if(file !== null) {
          const reader = new FileReader();
          const rABS = true;
          reader.onload = (event) =&gt; {
            // I WANT TO do edits but nothing seems to work
            //console logs not working etc...
            const data = event.target.result; 
            if(rABS) {
              workBook = XLSX.read(data, {type: 'binary'});
              jsonData = workBook.SheetNames.reduce((initial, name) =&gt; {
                const sheet = workBook.Sheets[name];
                initial[name] = XLSX.utils.sheet_to_json(sheet);
                return initial;
              }, {});
              const dataString = JSON.stringify(jsonData, 2, 2);
              document.getElementById('output').innerHTML = dataString.slice(0, 300).concat("...");
              this.setDownload(dataString);
  
            }
          }
          if(rABS) reader.readAsBinaryString(file);
          else reader.readAsArrayBuffer(file);
        }
      },
      getFile(item) {
        if(item.dataTransfer !== undefined) {
          const dt = item.dataTransfer;
          if(dt.items) {
            if(dt.items[0].kind == 'file') {
             return dt.items[0].getAsFile();
            }
          }
        }
        else {
          return item[0];
        }
      },
      setDownload(json) {
        this.hasDownload = true;
        setTimeout(()=&gt; {
          const el = document.getElementById("download");
          el.href = `data:text/json;charset=utf-8,${encodeURIComponent(json)}`;
          el.download = 'localization.json';
        }, 1000)
  
      },
      cleanup(event) {
        console.log("Cleaned up Event", event);
      }
    },
    components: {
      'xlsx-footer': Footer,
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>main.js:</strong> </p>
  
  <pre><code>    'use strict';
  
  var _vue = require('vue');
  
  var _vue2 = _interopRequireDefault(_vue);
  
  var _app = require('./app.vue');
  
  var _app2 = _interopRequireDefault(_app);
  
  function _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { default: obj }; }
  
  var app = new _vue2.default({
    el: "#app",
    render: function render(h) {
      return h(_app2.default);
    }
  });
  </code></pre>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt; XLSX-TO-JSON &lt;/title&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/tether/1.4.0/tether.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.11.3/xlsx.full.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="./css/style.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1 class="title text-center"&gt; XLSX-TO-JSON &lt;/h1&gt;
      &lt;div id="app" class="container"&gt;
      &lt;/div&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"&gt; &lt;/script&gt;
      &lt;script src="bin/bundle.js"&gt;&lt;/script&gt;
      &lt;!-- &lt;script src="assets/bundle.js"&gt;&lt;/script&gt; --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>All I want to do is edit the functions in the app.vue file! </p>
  
  <p>Any help would be great, cheers!</p>