Button click doesn't run method

clicking the button should dump a UUID to the console and set the app.id to the returned value. but it does nothing. why?

the HTML

<div id="app">
  <form @submit.prevent>
    <button class="btn btn-success" type="button" @click="generateUUID">
      <h1>&nbsp;<i class="las la-plus-circle"></i>&nbsp;&nbsp;{{ this.id }}</h1>
    </button>
</div>

the Javascript

function uuidv4() {
  // do the thing
};
var app = new Vue ({
  el: '#app',
  data: {
    id: 0,
  },
  methods: {
    generateUUID() {
      let newID = uuidv4();
      this.id = newID;
      console.log({newID});
    },
  },
});

EDIT: fixed typos. !@#$…

Is this really what you have in your code, or is it just an error posting it to the forums?

var app = new Vue() {

The object needs to be inside the parentheses.

i don’t understand. what do you mean? what object are you referring to?

The object that is passed to new Vue.

new Vue({ /* this object here */ })

In your code you have that object after the closing parenthesis:

new Vue() { /* the object is here, not being passed to the constructor */}

So:

var app = new Vue() {

should be:

var app = new Vue({

I would have expected this to cause errors, either during the build or in the console at runtime.

forum typo. i need a forking holiday… fixed it. now. how to get this forker running?

…dammit. i found the problem. nothing to do with the code. it runs fine. PEBCAK.