Laravel built Vue does not change on the web

Question

I have code like this:

app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('qrcodes', require('./components/QrCodes.vue'));

const app = new Vue({
    el: '#app'
});
Vue.config.devtools = true;

QrCodes.vue

<script>
export default {
  data() {
      return {
        qrcodes:[],
        qrcode: {
            ....
        },
      }
  },

  created() {
      this.fetchQrCodes();
  },

  methods: {
      fetchQrCodes() {
          fetch('/api/qrcodes')    
            .then(res => res.json())
            .then(res => {
                console.log(res);
          })
      }
  },
}
</script>

I assume everything should be fine but in the browser developer tools I am getting errors

app.js:47316 GET http://localhost/qrcodes 404 (Not Found) fetchQrCodes @ app.js:47316 created @ app.js:47308

app.js:44443 You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html app.js:47317 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at app.js:47317 at

And those lines in browser developer tools looks like

methods: {
    fetchQrCodes: function fetchQrCodes() {
        var _this = this;

        fetch('qrcodes').then(function (res) {   // this line didnt change after building
            return res.json();   // this line gives the second error
        }).then(function (res) {
            _this.qrcodes = res;
        });
    }
}

As you can see my fetchQrCodes() and browser does not match, fetching wrong url which I changed. I am running npm run watch tried turning it off and running npm run dev still browser code does not get updated. What could cause that?

EDIT: public/js/app.js is build correct and have the right changes but browser`s app.js does not.