How to get an input field value in Vue

Question

I'm new to Vue and I would like some help getting a value from an input field:

In my form I have:

<input type="hidden" id="groupId" value="1">

If I was using jQuery I would do:

var group_id = $('#groupId').val();

However, in Vue I don't know how to bind the hidden field:

<div id="app">
   <input type="text" v-model="groupId"> //Where do I put the value?
</div>

new Vue({
    el: '#app',
    data: {
        groupId: //What do I put here to get the field's value?
    }

How can I achieve this?

Answer 1

Update to the update: See this answer. Previously updated answer was wrong.

Original answer:

In Vue, you don't get things from the view and put things into the view. Vue does that. You do all manipulations in the viewmodel, and make bindings in the view so that Vue knows how to synchronize it. So you'd bind the input to your model data item:

<input type="hidden" id="groupId" v-model="groupId">

and set its value in your viewmodel:

data: {
    groupId: 1
}